如何使用角度显示存储在数组内部的数组答案

【问题标题】：How can I show array stored inside of array using angular如何使用角度显示存储在数组内部的数组
【发布时间】：2020-03-29 07:20:30
【问题描述】：

我有一个显示用户数据的表格。请参阅下面的代码。

<tr *ngFor="let user of users">
    <td><img src="{{user.picture}}" class="avatar"></td>
    <td>{{user.name}}</td>
    <td></td>
    <td></td>
    <td></td>
    <td>%</td>
    <td></td>
    <td><a href=""><button>Download</button></a></td>
</tr>

我的“用户”数组中存储了一个数组，称为“工作数据”。 'workdata' 数组内部是我想在页面上显示的几个项目。当我尝试这个{{ user.workdata.hours_present }} 它没有显示任何东西。有人可以帮帮我吗？

【问题讨论】：

因为 workdata 是一个数组，并且没有属性 hours_present

标签： javascript arrays angular typescript ngfor

【解决方案1】：

如果 workdata 是用户中的另一个数组，则需要在其中使用另一个 ngFor

  <ng-container *ngFor="let user of users"">
       <tr *ngFor="let workdataobj of user.workdata">
         <td>{{workdataobj.hours_present}}</td>
       </tr>
   <ng-container>

或者您可以使用索引访问特定元素，

<td><img src="{{user.workdata[0].hours_present}}" class="avatar"></td>

【讨论】：

【解决方案2】：

首先您需要迭代用户数组，然后才能迭代每个用户的工作数据数组。

<div *ngFor="let user of users"">
    <tr *ngFor="let workData of user.workdata">
        <td>{{workData.hours_present}}</td>
    </tr>
</div>

【讨论】：