时间戳

首页 > 解决方案 > 如何将两个角度数组与 ids 进行比较，如果它与第一个数组的 id 匹配，则给出第二个数组的输出

angular - 如何将两个角度数组与 ids 进行比较，如果它与第一个数组的 id 匹配，则给出第二个数组的输出

问题描述

我有两个数组

第一个数组是

arr1  = [
           {id:1,name:"cat1"},
           {id:2,name:"cat2"},
           {id:3,name:"cat3"},
        ];

第二个数组是

arr1  = [
           {id:1,cat_id:1,name:"satya"},
           {id:2,cat_id:3,name:"ajay"},
        ];

到目前为止，我正在将它们与它进行比较并在结果 html 上显示它们

<tr *ngFor="let item of arr2;let i = index">
    <td *ngFor="let item2 of arr1;let i = index" >
    <span ngIf*="item.cat_id=== item2.id;">
        {{item2.name}}
    </span>
    </td>
</tr>

它显示有很多空格的表格，并且没有显示所需的结果

标签： angular

解决方案

您应该使您的模板尽可能简单。每次添加任何 javascript 逻辑时，都应该问问自己将其移动到控制器或服务是否更容易。

在这里，您可以在组件的控制器中创建一个新数组，该数组根据您的逻辑组合其他两个。像这样的东西：

    combinedArray = arr2.map(el => ({
      ...el,
      ...arr1.find(arr1El => arr1El.id === el.cat_id),
    }));

我在这里假设 arr2 中的所有元素都与 arr1 中的元素匹配，否则您必须在.filter此之后添加另一个元素.map。

那么模板会变得超级简单：

<tr *ngFor="let item of combinedArray">
  <td>
    <span>{{item.name}}</span>
  </td>
</tr>

推荐阅读