각도 2 * ngFor가 표에 인쇄되지 않습니다.

Question

각도를 사용할 때 새로운 기능으로 데이터베이스에서 검색 한 데이터를 표시하는 데 문제가 있습니다. 누군가가 내가 왜이 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

에 그것을 할 때 코드입니다 ngFor 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> 

는 희망이 도움이 아래처럼해야한다.