用HTML4角4 ngFor遍历对象数组

Question

我使用的是角4，我想循环遍历一个对象数组，并在角材料网格块中显示信息。我的html (app.component.html)看起来有点像这样

<div class="list" *ngIf="listContacts == true">
 <mat-grid-list cols="3" rowHeight="2:1" *ngFor="let i of contacts">
  <mat-grid-tile>
    <div class="card">
      <img src={{contacts[i].image}} alt="picture">
      <h2>{{contacts[i].name}}</h2>
    </div>
  </mat-grid-tile>
 </mat-grid-list>
</div>

contacts是app.component.ts中的一个对象数组。联系人中有9个对象，但为了简单起见，我只在这里放置了两个对象。

export class AppComponent {
// array of contact objects
contacts = [
{
  name: "Robbie Peck",
  image: "src/assets/robbie.jpg",
}, 
{
  name: "Jenny Sweets",
  image: "src/assets/jenny.jpg",
}, 

...

]
}

因此，与其有九种不同的信息出现，每一种都有自己的信息(循环I通过联系人)，我只有一个，控制台显示了一个错误，它不识别contactsi。我做错了什么?我怎么能得到9，每个在类型记录(app.component.ts)文件中的联系人对象中的名称和图像I？

Answer 1

您不必传递索引，只需使用变量i，并访问i.image和i.name

<mat-grid-list cols="3" rowHeight="2:1" *ngFor="let i of contacts" >
 <mat-grid-tile>
    <div class="card">
      <img src={{i.image}} alt="picture">
      <h2>{{i.name}}</h2>
    </div>
  </mat-grid-tile>