<nz-list nzItemLayout="vertical" [nzLoading]="!list">
  <nz-list-item *ngFor="let item of list" nzNoFlex>
    <nz-list-item-meta>
      <nz-list-item-meta-title>
        <a href="{{ item.href }}" target="_blank">{{ item.title }}</a>
      </nz-list-item-meta-title>
      <nz-list-item-meta-description>
        <nz-tag>Alain</nz-tag>
        <nz-tag>ng-zorro-antd</nz-tag>
        <nz-tag>Ant Design</nz-tag>
      </nz-list-item-meta-description>
    </nz-list-item-meta>
    <p>{{ item.content }}</p>
    <div class="mt-md d-flex">
      <nz-avatar [nzSrc]="item.avatar" [nzSize]="'small'" class="mr-sm"></nz-avatar>
      <a href="{{ item.href }}" target="_blank">{{ item.owner }}</a>
      <span class="px-sm">发布在</span>
      <a href="{{ item.href }}" target="_blank">{{ item.href }}</a>
      <time class="pl-md text-grey" title="{{ item.updatedAt }}">{{ item.updatedAt | _date }}</time>
    </div>
    <ul nz-list-item-actions>
      <nz-list-item-action> <i nz-icon nzType="star" class="mr-sm"></i>{{ item.star }} </nz-list-item-action>
      <nz-list-item-action><i nz-icon nzType="like" class="mr-sm"></i>{{ item.like }}</nz-list-item-action>
      <nz-list-item-action><i nz-icon nzType="message" class="mr-sm"></i>{{ item.message }}</nz-list-item-action>
    </ul>
  </nz-list-item>
</nz-list>
