Ng-zorro-antd: List无法使用Avatar模板

[ismezy]

Reproduction link

https://stackblitz.com/edit/angular-ukxd4f?file=src/app/app.component.ts

Steps to reproduce

在list上使用avatar模板

What is expected?

正常显示avatar模板内容

What is actually happening?

未显示avatar模板内容

| Environment | Info |
|---|---|
| ng-zorro-antd | 7.2.0 |
| Browser | chrome |

[ng-zorro-bot]

Translation of this issue:

---

List cannot use Avatar template

Reproduction link

https://stackblitz.com/edit/angular-ukxd4f?file=src/app/app.component.ts

Steps to reproduce

Use avatar template on list

What is expected?

Normal display of avatar template content

What is actually happening?

Avatar template content not shown

| Environment | Info |
|---|---|
| ng-zorro-antd | 7.2.0 |
| Browser | chrome |

[hsuanxyz]

@ismezy 感谢你的反馈，你有兴趣为我们修复这个问题吗？

https://github.com/NG-ZORRO/ng-zorro-antd/blob/3c6e8354d5430025848b3d26b05a3a52aa8840dd/components/list/nz-list-item-meta.component.html#L1-L5

改为:

<div *ngIf="avatarStr || avatarTpl" class="ant-list-item-meta-avatar">
  <ng-container *ngIf="avatarStr; else avatarTemplate">
    <nz-avatar [nzSrc]="avatarStr"></nz-avatar>
  </ng-container>
  <ng-container #avatarTemplate [ngTemplateOutlet]="avatarTpl"></ng-container>
</div>

[hsuanxyz]

@ismezy 我再看了 https://ant.design/components/list-cn/ 的实现发现目前样式只对 avatar, 不支持别的组件或元素，否者会丢失关键的样式。但是你依然可以手动定义样式完成你想要的功能：

https://stackblitz.com/edit/angular-ukxd4f-gtv6cr?file=src/app/app.component.ts

所以我将关闭此问题和相关的 PR。

close #3251