如何将一些 arrays 推送到 angular 8 中的主阵列

Question

嗨，我正在研究Angular 7 ，我有 3 个主要的 arrays 从 API 获取，如stackblitz中提到的

而现在3个主要的arrays看起来像这样。

 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

这是更新的堆栈闪电战

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

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