Angular 4 ngFor ile HTML kullanarak nesne dizisi üzerinde döngü oluşturma

Angular 4 kullanıyorum ve bir nesne dizisi üzerinde döngü yapmak ve bilgileri Angular Material ızgara karolarında görüntülemek istiyorum. HTML'im (app.component.html) biraz şöyle görünüyor

<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>

Ve contacts, app.component.ts içinde bir nesneler dizisidir. Contacts içinde DOKUZ nesne var ama basitlik açısından burada sadece ikisini koydum.

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

...

]
}

Yani dokuz farklı 'sın görünmesini sağlamak yerine, her biri kendi bilgilerine sahip olacak şekilde (i'yi contacts üzerinde döndürerek), sadece bir tane var ve konsol bir hata gösteriyor çünkü contacts[i] tanınmıyor. Ne yanlış yaptım? typescript (app.component.ts) dosyasında her biri contacts nesnesindeki i ile isim ve resme sahip 9 tane 'sı olmasını nasıl sağlayabilirim?

Cevap #1

İndeksi geçirmenize gerek yok, sadece i değişkenini kullanabilir ve i.image ile i.name öğelerine erişebilirsiniz

<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>

İlgili makaleler