角度2 * ngForがテーブルに印刷されない

Question

私はAngularを使用していて、データベースから取得したデータを表示する際に問題が発生しました。誰かがなぜ私がこのHTMLコードで* ngForを使用すると、HTMLだけに表示され、残りの行には表示されないのか理解できますか？

これは私のHTMLファイル

<table> 
 
    <thead> 
 
     <tr> 
 
      <th>Name</th> 
 
      <th>Lastname</th> 
 
      <th>Email</th> 
 
      <th>Phone</th> 
 
      <th>School</th> 
 
      <th>Action</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr *ngFor="let contact contacts$"> 
 
      <td>{{ contact.first_name }}</td> 
 
      <td>{{ contact.last_name }}</td> 
 
      <td>{{ contact.email }}</td> 
 
      <td>{{ contact.phone_number }}</td> 
 
      <td>{{ contact.school }}</td> 
 
     </tr> 
 
    </tbody> 
 
</table>

であり、これは私のcomponent.tsは私がGETのHTTP呼び出しから自分の情報を取得しています

import { Component, OnInit } from '@angular/core'; 
 
import { ContactService } from "./contacts.service"; 
 
import { Router } from '@angular/router'; 
 
import { Observable } from 'rxjs/Observable'; 
 
import { Contact } from './contact' 
 

 
@Component({ 
 
    selector: 'app-contacts', 
 
    templateUrl: './contacts.component.html', 
 
    styleUrls: ['./contacts.component.css'] 
 
}) 
 

 
export class ContactsComponent implements OnInit { 
 

 
    constructor(private router:Router, private contactService: ContactService) 
 
    {} 
 
    contacts$: Observable<Contact[]>; 
 

 
    ngOnInit() { 
 
     this.contacts$ = this.contactService.getContacts(); 
 
    } 
 
}

ファイルであります* ngForをタグで行うとうまく動作しますが、diではありませんスプレイ私はタグ

上でそれを使用するときにここに私は私の知る限り、あなたの*でofが欠落している見ることができるように

<div *ngFor="let contact of contacts$ | async" > 
 
    {{contact.first_name}} 
 
</div>

Answer 1

でそれを行うときのためのコードがありますng For trタグ。 あなたのHTMLコードは以下のとおりです

<tbody> 
     <tr *ngFor="let contact of contacts$"> <!-- adding of to retrive data --> 
      <td>{{ contact.first_name }}</td> 
      <td>{{ contact.last_name }}</td> 
      <td>{{ contact.email }}</td> 
      <td>{{ contact.phone_number }}</td> 
      <td>{{ contact.school }}</td> 
     </tr> 
    </tbody> 

希望すると助かります。