Angular 和使用来自 API 的 JSON答案

【问题标题】：Angular and using a JSON from an APIAngular 和使用来自 API 的 JSON
【发布时间】：2021-03-03 03:11:01
【问题描述】：

这是我从 API 收到的 JSON 响应

{
   "content":[
      {
         "id":"4354345",
         "name":"asdasd",
         "stuff":null
      },
         {
         "id":"4353345",
         "name":"fgdfgddd",
         "stuff":null
      },
         {
         "id":"4353425",
         "name":"as11111dasd",
         "stuff":null
      }

   ],
   "pageable":{
      "sort":{
         "sorted":false,
         "unsorted":true,
         "empty":true
      },
      "offset":0,
      "pageNumber":0,
      "pageSize":1000,
      "paged":true,
      "unpaged":false
   },
   "totalPages":1,
   "totalElements":75,
   "last":true,
   "number":0,
   "sort":{
      "sorted":false,
      "unsorted":true,
      "empty":true
   },
   "size":1000,
   "first":true,
   "numberOfElements":75,
   "empty":false
}

我的目标是迭代 JSON 的“内容”部分，即

"id":"4354345", “名称”：“asdasd”， “东西”：空

在这样的表格中：

     <tbody>
          <tr *ngFor="let data of dataContent; index i">
                          {{data[i].id}}
                          {{data[i].name}}
                          {{data[i].stuff}}
          </tr>
      </tbody>

我是这样做的：

 ngOnInit(){
       this.api.getAll((error,res) => {
           this.data = res;
           this.dataContent = this.data.content;
      });
  }

如果我对 dataContent[0].id 或其他变量进行 console.log，它可以工作，但为什么它在 html 中不显示任何内容，并且控制台给出错误

【问题讨论】：

请粘贴错误
这些错误是什么？尝试调试它或在此处发布。

标签： angular

【解决方案1】：

<tbody>
          <tr *ngFor="let data of dataContent">
                          {{data.id}}
                          {{data.name}}
                          {{data.stuff}}
          </tr>
      </tbody>

这里不用索引和我

或者如果你想要我，你必须

<tbody>
          <tr *ngFor="let data of dataContent; let i = index">
                       <td>   {{data.id}}</td>  
                       <td>     {{data.name}}</td>  
                      <td>      {{data.stuff}}</td>  
          </tr>
      </tbody>

【讨论】：

【解决方案2】：

在这种情况下，您不需要访问index，当您使用*ngFor 指令时，您正在循环dataContent，而let data 在每次迭代中引用一个值。只是：

<tr *ngFor="let data of dataContent">
    <td>{{data.id}}</td>
    <td>{{data.name}}</td>
    <td>{{data.stuff}}</td>
</tr>

如果您确实需要使用索引（对于任何其他情况），问题在于 index i 部分，将其更正为 index as i（注意缺少的 as强>)

<tr *ngFor="let data of dataContent; index as i">
    <td>{{data[i].id}}</td>
    ...
</tr>

同样，在这种情况下，您不需要 index，至少对于您共享的代码部分而言。

了解更多关于*ngForhere的信息。

【讨论】：

【解决方案3】：

HTML 模板需要修正，循环中的data 变量将保存数组中的一个对象。

<tbody>
      <tr *ngFor="let data of dataContent">
          <td>{{data.id}}</td>
          <td>{{data.name}}</td>
          <td>{{data.stuff}}</td>
      </tr>
</tbody>

【讨论】：