
    <nz-switch [(ngModel)]="loading"></nz-switch>
    <nz-list [nzDataSource]="listData" [nzRenderItem]="item" nzItemLayout="vertical">
      <ng-template #item let-item>
        <nz-list-item
          [nzContent]="loading ? ' ' : item.content"
          [nzActions]="loading ? [] : [starAction, likeAction, msgAction]"
          [nzExtra]="loading ? null : extra"
        >
          <nz-skeleton [nzLoading]="loading" [nzActive]="true" [nzAvatar]="true">
            <ng-template #starAction>
              <nz-icon nzType="star-o" style="margin-right: 8px;" />
              156
            </ng-template>
            <ng-template #likeAction>
              <nz-icon nzType="like-o" style="margin-right: 8px;" />
              156
            </ng-template>
            <ng-template #msgAction>
              <nz-icon nzType="message" style="margin-right: 8px;" />
              2
            </ng-template>
            <nz-list-item-meta [nzAvatar]="item.avatar" [nzTitle]="nzTitle" [nzDescription]="item.description">
              <ng-template #nzTitle>
                <a href="{{ item.href }}">{{ item.title }}</a>
              </ng-template>
            </nz-list-item-meta>
            <ng-template #extra>
              <img width="272" alt="logo" src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png" />
            </ng-template>
          </nz-skeleton>
        </nz-list-item>
      </ng-template>
    </nz-list>
  