如何在angular中迭代json？

Question

我从数据库中得到以下 json，我想做一个 ngfor；但我不知道如何使用这种 JSON

<div class="col-md-4" *ngFor="let referencia of referencias.rows">
       <div class="card text-center">
           <div class="card-header">

           </div>
           <div class="card-body">
               {{referencia.2}}
           </div>
      </div>
   </div>

Answer 1

您需要先从 API 解析您的 json return，然后再使用它：

在您接收数据的 ts 文件中：

referencias = JSON.parse(referencias);

并且由于 referencias.rows 中的每个 referencia 都是一个数组，您可以像这样访问它的数据 referencia[arrayIndex]:

<div class="col-md-4" *ngFor="let referencia of referencias.rows">
    <div class="card text-center">
        <div class="card-header">
        </div>
        // Changed referencia.2 to referencia[2]
        <div class="card-body">
               {{referencia[2]}} // Should show 'AYALA'
        </div>
    </div>
</div>

Answer 2

在您的 ts 文件中，我假设 referencias 是 API 的已解析 json 响应。下面的解决方案是获取所有行。

<div class="col-md-4" *ngFor="let referencia of referencias['rows']">
   <div class="card text-center">
       <div class="card-header">

       </div>
       <div class="card-body" *ngFor="let rowData of referencia">
           {{rowData}}
       </div>
  </div>

希望这对你有用。

如何在angular中迭代json？

How to iterate json in angular?

json

angular

ngfor