当从 api 获取数据时，Angular 2+ 用 ngFor 填充 html 表

Question

我对 Angular 还很陌生，所以虽然我正在努力完成一些事情，但我想这并不困难，但我陷入了困境，需要你的帮助。

我需要做的是在单击按钮时以及从 api 调用收到数据后，用客户端数据填充 html 表。

如果我将 ngFor 定义为 TypeScript 类的公共(public)属性(如 clientData1 所示)(我将其作为示例)，我就能够使用 ngFor 显示“固定”数据，但无法将 ngFor 绑定(bind)到包含 json 结果的变量(clientsData)更改。

简而言之，我想做的是，当我单击按钮时，我启动 getItems 方法，一旦 getItems 得到结果，我就需要更新表。

这是我的 TypeScript 类:

import {Component} from '@angular/core';
import { Injectable }     from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable }     from 'rxjs/Observable';

import 'rxjs/add/observable/throw';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/toPromise';

@Injectable()
@Component({
  selector: 'demo-app',
  templateUrl: 'app/views/app.component.html'
})
export class AppComponent {
  public clientsData : string;
  private clientsUrl : string = 'http://www.mocky.io/v2/5808862710000087232b75ac';
  public clientsData1 : any = [{'id': 1}, {'id': 3}, {'id': 5}];
  constructor (private http: Http) { }
  ngOnInit() {
    let btnGetClients = document.getElementById("btnGetClients");
    btnGetClients.addEventListener("click", (e:Event) => this.getItems()
        .subscribe(
          ipdata => this.clientsData = ipdata.clientsJson
        ));
  }  
  getItems(): Observable<IPData> {    
        return this.http.get(this.clientsUrl)
                        .map(this.extractData);
  }
  extractData(res: Response) {
    return res.json();
  }
}
class IPData {
  public clientsJson : string;
}

这是 html 模板:

<h1>Insurance App</h1>
<hr />
<button id="btnGetClients">Get Clients</button>
<br/><br/>
<table>
    <thead>
        <th>Id</th>
        <th>Name</th>
        <th>Email</th>
        <th>Role</th>
    </thead>
    <tbody *ngFor="let client of clientsData">
        <tr>
            <td>{{client.id}}</td>
        </tr>
    </tbody>
</table>

任何帮助将不胜感激。

谢谢。

Answer 1

首先，在 TS 文件中使用任何 DOM 操作都是不好的做法。您可以像这样添加点击事件处理程序

<button (click)='getItemsSubscription()'>Get Clients</button>

要迭代从创建组件时起就不存在的数组，您需要像这样使用 ngFor

 <tbody *ngFor="let client of clientsData">
        <tr>
            <td>{{client?.id}}</td>
        </tr>
 </tbody

在客户端上带有引号。引号意味着当您将数据放在组件词法环境中时，您将获得数据呈现，或者根本不会呈现它。

如果您想通过单击按钮来调用数据，还有一件事。当您调用一个函数时，您并没有订阅它，因此您需要将其包装起来并执行类似的操作

  getItemsSubscription() {
       this.getItems().subscribe(
              ipdata => this.clientsData = ipdata.clientsJson
        }
  }