Angular 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 文件

 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(); } }

我从 GET HTTP 调用中获取我的信息，如果我在标签上执行 *ngFor 则它工作正常，但当我在标签上使用它时它不会显示

这是我在一个

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

Answer 1

据我所知，您的 *ngFor tr 标签中缺少of 。 您的 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>

希望能帮助到你。

Answer 2

您没有编写正确的循环语法，例如在这种情况下您缺少“of”并且还交叉检查了正确的属性名称。

<tbody>
  <tr *ngFor="let contact of 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>