Angular 角度2+；从api获取数据时用ngFor填充html表

我对Angular很陌生，所以虽然我正在努力完成一些事情，但我想这并不难，我被卡住了，需要你的帮助

我需要做的是在从api调用接收到数据后，单击按钮，用客户机数据填充html表

如果我将ngFor定义为clientsData1中的TypeScript类的公共属性（我将其作为一个示例），那么我就能够使用ngFor显示“固定”数据，但无法将ngFor绑定到包含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;
}

从'@angular/core'导入{Component}；
从“@angular/core”导入{Injectable}；
从'@angular/Http'导入{Http，Response}；
从“rxjs/Observable”导入{Observable}；
导入“rxjs/add/observable/throw”；
导入“rxjs/add/operator/catch”；
导入'rxjs/add/operator/debounceTime'；
导入'rxjs/add/operator/distinctUntilChanged'；
导入'rxjs/add/operator/map'；
导入'rxjs/add/operator/switchMap'；
导入“rxjs/add/operator/toPromise”；
@可注射（）
@组成部分({
选择器：“演示应用程序”，
templateUrl:'app/views/app.component.html'
})
导出类AppComponent{
公共客户端数据：字符串；
private clientsUrl:string='1〕http://www.mocky.io/v2/5808862710000087232b75ac';
publicclientsdata1:any=[{'id'：1}，{'id'：3}，{'id'：5}]；
构造函数（私有http:http）{}
恩戈尼尼特（）{
让btnGetClients=document.getElementById（“btnGetClients”）；
btnGetClients.addEventListener（“单击”，（e:Event）=>this.getItems（）
.订阅(
ipdata=>this.clientsData=ipdata.clientsJson
));
}  
getItems（）：可观察的{
返回this.http.get（this.clientsUrl）
.map（此.data）；
}
提取数据（res:Response）{
返回res.json（）；
}
}
类IPData{
publicclientsjson: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>

保险应用程序

获得客户



身份证件
名称
电子邮件
角色
{{client.id}

任何帮助都将不胜感激

---

谢谢。

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

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

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

---

如果您没有注意到您正在将数据存储在clientsData中并在clientsData1Yes Birju上进行迭代，那么我特意将其作为我能够使用数据更新DOM的一种方法的示例。无论如何，我会编辑它，这样就不会有其他人感到困惑。非常感谢你的快速反应，海怪。我对代码进行了修改以符合您的建议，但当我单击按钮时，什么也没有发生。是的，我肯定没有注意到您得到了

public clientsData:string将类型更改为any谢谢大家的努力。我知道多亏了你的帮助，我离你很近了，但是运气不好。如果我“手动”在getItems（）中创建变量clientsData，方法是：this.clientsData=[{'id'：2}，{'id'：4}，{'id'：6}]；在html中，我可以看到dom用数据更新，但api返回json的方式略有不同，所以这可能就是问题所在？这是api url：非常感谢你，Kraken，你的新评论还可以，但我确信现在的问题是api返回的json格式，不是[{}，{}，…]，而是{“客户端”：[{}，{}，{}，…]}，所以可能我需要提取客户端节点，或者可能不是写{{client？.id}我应该写一些稍微不同的东西。所以ipdata.clients或ipdata.clientsJson.clients，你需要一个数组，你可以；t通过ngFor迭代对象
  getItemsSubscription() {
       this.getItems().subscribe(
              ipdata => this.clientsData = ipdata.clientsJson
        }
  }