如何以角度 8 将一些数组推送到主数组

Question

您好，我正在处理 Angular 7，我有 3 个从 API 获取的主要数组，如 stackblitz 中提到的那样

现在 3 个主数组看起来像这样。

 this.mainarr = [
      { id: 1, name: "Praveen", age: 3, color: 3 },
      { id: 2, name: "kumar", age: 2, color: 4 },
      { id: 3, name: "john", age: 4, color: 2 },
      { id: 4, name: "alex", age: 5, color: 1 },
      { id: 5, name: "profes", age: 3, color: 2 }
    ];

    this.agearr = [
      { id: 1, age: 22 },
      { id: 2, age: 24 },
      { id: 3, age: 33 },
      { id: 4, age: 12 },
      { id: 5, age: 26 }
    ];

    this.colorarr = [
      { id: 1, color: "black" },
      { id: 2, color: "paleblack" },
      { id: 3, color: "brown" },
      { id: 4, color: "white" },
      { id: 5, color: "greyish" }
    ];

所以，在mainarr 中，我有 id，agearr 和 colorarr id 匹配，我需要在 mainarr 中使用不同的键值对并显示该值。

所以我的预期结果应该是

[
      { id: 1, name: "Praveen", age: 3, color: 3,agename: 33,colorname: 'brown'},
      { id: 2, name: "kumar", age: 2, color: 4,agename: 24,colorname: 'white'},
      { id: 3, name: "john", age: 4, color: 2 agename: 12,colorname:'paleblack'},
      { id: 4, name: "alex", age: 5, color: 1 agename: 26,colorname:'black'},
      { id: 5, name: "profes", age: 3, color: 2 agename: 33,colorname:'paleblack'}
];

我得到了想要的结果，但只有在页面刷新之后怎么办？TIA

Answer 1

尝试如下：

  getFunction() {
     this.mainarr.map(x => {
        x["agename"] = this.agearr.find(y => y.id == x.age)["age"];
        x["colorname"] = this.colorarr.find(y => y.id == x.color)["color"];
     });
     console.log(this.mainarr);
  }

工作Stackbllitz 示例：https://stackblitz.com/edit/angular-ivy-ve5cdp?file=src/app/app.component.ts

Answer 2

Here 是更新的堆栈闪电战

在 if 块中，您检查了错误的属性。更正了。

if (this.mainarr[i].age == this.agearr[j].id)