angular 5 *ngFor 两个数组（将两个数组的对象合并成单个对象数组）答案

【问题标题】：angular 5 *ngFor two array (merge objects of two arrays to make single array of objects)angular 5 *ngFor 两个数组（将两个数组的对象合并成单个对象数组）
【发布时间】：2018-09-21 18:25:32
【问题描述】：

我从角度 5 中的两个 get 方法获取数组。我想要将这两个数组 (JSON) 组合成一个数组并在一个 for 循环中打印它

我的两个数组：-

servers3 =[
{
  sub:'sub',
  subDesc:'subDesc'
}];

public tableData:any;

我正在使用 concat 两个组合两个数组，如下所示

<table>
  <tr>
    <th>fileName</th>
    <th>icon</th>
    <th>fullPath</th>
    <th>sub</th>
    <th>subDesc</th>
    <th>image</th>
  </tr>
  <tr *ngFor="let item of tableData.concat(servers3)">
    <td>{{item?.fileName}}</td>
    <td>{{item?.icon}} </td>
    <td>{{item?.fullPath}}</td>
    <td>{{item?.sub}}</td>
    <td>{{item?.subDesc}}</td>
    <td><img src="{{item?.fullPath}}" width="200px" height="200px" alt="adawdawd"/></td>
  </tr>
</table>
</div>

我得到如下输出：-

如您所见，它没有显示在一行中每个数组单独完成

如果有人知道答案，请给我解决方案提前谢谢你

【问题讨论】：

您的第二个数组项只有sub 和subDesc 属性，因此它们显示在这些模板位置。此外，您需要处理数组中的结构并将其作为一个变量从循环中引用，而不是在模板中进行连接。
我想要的是两个在同一行打印这两个数组项，因为它们都具有相同的大小或者说数据索引
...那么您需要编写一些代码来展平数组中的这些项目，而不仅仅是在模板中连接它们。
你能告诉我我似乎无法弄清楚的方法

标签： arrays json angular typescript angular5

【解决方案1】：

您可以使用以下方法，记住两个数组的长度应该相同，否则会产生错误。

this.tableData.map((item, index) => {
     return Object.assign(item, servers3[index]));
});

HTML

...
<tr *ngFor="let item of tableData">
...

【讨论】：

感谢这个工作，在我设置 tableData 的值后立即映射该函数。
很高兴听到这个消息。