Question

在我的项目中，我从https://jsonplaceholder.typicode.com/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个人。我想动态地做到这一点，因为我要获得的行数与人们的数据一样多。

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>

如果ngIf为空/未定义，则table上的dataFromServer条件将防止控制台错误/渲染问题

Answer 3

您可以使用*ngFor来完成。在html中，通常是。作为示例，我们假设我们有一个像这样的组件：

private users: User[] = [];

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

User类：

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>

Answer 4

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

<html>
<head>
    <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
</head>

<body>

<p>Show boxes of type:</p>
<button id="toggleAll">Show all</button>
<button id="toggleA">Show group A</button>
<button id="toggleB">Show group B</button>

<hr />

<div id="a1" class="box groupA">
  <h4>Title</h4>
  <p>Text for box A1</p>
</div>
<div id="a2" class="box groupA">
  <h4>Title</h4>
  <p>Text for box A2</p>
</div>

<div id="b1" class="box groupB">
  <h4>Title</h4>
  <p>Text for box B1</p>
</div>
<div id="b2" class="box groupB">
  <h4>Title</h4>
  <p>Text for box B2</p>
</div>

</body>
</html>

角度将数据行动态写入表

4 个答案: