Angular将数据行动态写入表答案

【问题标题】：Angular write data lines dynamically to a tableAngular将数据行动态写入表
【发布时间】：2018-07-03 14:00:45
【问题描述】：

在我的项目中，我从JSONPlaceholder - Users获取数据
我是 Angular 的新手，所以如果你发现我获取数据的方式有些愚蠢，请警告我。

dataFromServer;
constructor(private http: HttpClient){
  this.dummyPromise.then(
    response => {
      console.log("response from dummy promise:", response);
      this.dataFromServer = response;
    },
    error => {
      console.log("Error happened with dummy promise:", error)
    }
  )
}

dummyPromise = new Promise((resolve, reject) => {
  this.http.get('https://jsonplaceholder.typicode.com/users').subscribe(data => {
    console.log(data);
    this.dataFromServer = data;
  });
  //resolve(returnData);
});

问题是，在我的 HTML 文件中，我将数据写入如下表格：

<tr *ngIf="dataFromServer">
  <td>{{dataFromServer[0].id}}</td>
  <td>{{dataFromServer[0].name}}</td>
  <td>{{dataFromServer[0].username}}</td>
  <td>{{dataFromServer[0].email}}</td>
</tr>
<tr *ngIf="dataFromServer">
  <td>{{dataFromServer[1].id}}</td>
  <td>{{dataFromServer[1].name}}</td>
  <td>{{dataFromServer[1].username}}</td>
  <td>{{dataFromServer[1].email}}</td>
</tr>

... 10 个人。我想动态地做，我得到的人的数据有多少行。

【问题讨论】：

标签： html angular jsonplaceholder

【解决方案1】：

我认为你应该尝试使用 *ngFor 而不是 *ngIf。我给你举个例子。

<tr *ngFor="let data of dataFromServer">
 <td>{{data.id}}</td>
<td>{{data.name}}</td> 
<td>{{data.username}}</td>
<td>{{data.email}}</td> 
</tr>

因此，它将为您的 dataFromServer 中的每个对象重复

【讨论】：

【解决方案2】：

使用ngFor 迭代数据数组：

<table *ngIf="dataFromServer">
    <tr *ngFor="let item of dataFromServer">
        <td>{{item.id}}</td>
        ...
    </tr>
</table>

如果dataFromServer 在从您的 API 接收之前为空/未定义，table 上的 ngIf 条件将防止控制台错误/呈现问题

【讨论】：

【解决方案3】：

您可以如下替换您的html代码

<tr *ngFor="let row of dataFromServer">
    <td>{{row.id}}</td>
    <td>{{row.name}}</td> 
    <td>{{row.username}}</td>
    <td>{{row.email}}</td>
</tr>

【讨论】：

【解决方案4】：

您可以使用*ngFor 来执行此操作。它实际上是 html 中的一个 for 。作为一个例子，我们假设我们有一个这样的组件：

private users: User[] = [];

ngOnInit(){
   this.service.getUser()
   .subscribe(userList => {
      this.users = userList;
   });
}

用户类：

export class User {
   public id: number;
   public name: string;
}

您可以像这样在 html 中使用 *ngFor：

<span *ngFor="let user of users">
UserID: {{user.id}} - User Name: {{user.name}}
</span>

所以基本上，与您的代码相关，只需将您从 http 调用中获得的 json 数据放入 User 的对象中，然后像这样修改 html：

<tr *ngFor="let user of users">
  <td>{{user.id}}</td>
  <td>{{user.name}}</td>
  .....
</tr>

【讨论】：