Angular 4中用ngFor遍历对象数组并在Angular Material网格展示

我来帮你搞定这个Angular Material网格展示的问题～你当前的代码有两个核心问题需要修正：

• 你把*ngFor指令放在了<mat-grid-list>标签上，这会导致每一条联系人数据都生成一个完整的3列网格，而不是在同一个网格里生成多个瓷砖，完全不符合你的需求。正确的做法是把*ngFor移到<mat-grid-tile>标签上，让每个瓷砖对应一个联系人。
• 在*ngFor="let i of contacts"里，i已经是contacts数组中的单个对象了，不需要再用contacts[i]来访问属性，直接用i.image、i.name就能拿到对应的值。另外建议把变量名从i改成contact，这样代码语义更清晰，可读性更强。

这里是修正后的完整代码：

<div class="list" *ngIf="listContacts == true">
  <mat-grid-list cols="3" rowHeight="2:1">
    <!-- 把*ngFor移到mat-grid-tile上，变量名改成contact更语义化 -->
    <mat-grid-tile *ngFor="let contact of contacts">
      <div class="card">
        <!-- 用[src]绑定代替插值表达式，更安全符合Angular最佳实践 -->
        <img [src]="contact.image" alt="联系人头像">
        <h2>{{contact.name}}</h2>
      </div>
    </mat-grid-tile>
  </mat-grid-list>
</div>

额外提个小细节：图片的src用[src]属性绑定比src={{}}插值更稳妥，能避免潜在的XSS风险，也是Angular官方推荐的写法哦～

内容的提问来源于stack exchange，提问作者user9159857