Angular 将数据行动态写入 table

Question

在我的项目中，我从 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 文件中，我将数据写入 table，如下所示：

<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 个人。我想动态地做，我得到的人的数据有多少行。

Answer 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 中的每个对象重复

Answer 2

使用ngFor迭代数据数组：

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

table 上的 ngIf 条件将防止控制台 errors/rendering 问题，如果 dataFromServer 在从您的 API[ 接收之前是 null/undefined =15=]

Answer 3

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

private users: User[] = [];

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

用户class：

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 数据放入用户对象，然后修改 html 像这样：

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

Answer 4

您可以将 html 代码替换为下面的代码

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

Angular 将数据行动态写入 table

Angular write data lines dynamically to a table

html

angular

jsonplaceholder