Angular Observable数据推入数组问题：如何将任务名称逐个存入数组独立索引

这问题我熟！你现在的代码之所以会把所有任务ID（或者你提到的任务名称，看代码里写的是x.id，可能是笔误？）都挤在数组第一个索引里，核心原因是你把整个数组当成单个元素push进去了。

问题根源分析 #

看你这段代码：

this.tasks.pipe(map(x => x.map(x => x.id))).toPromise().then(id => this.lineChartLabels.push(id))

其中x.map(x => x.id)已经帮你把tasks转换成了一个包含所有ID的数组，但你调用push(id)时，push方法会把这个数组参数当作一个独立元素直接塞进lineChartLabels，最终数组结构变成了[[id1, id2, id3...]]——外层数组的第一个元素就是你想要的完整ID列表，这显然不是你要的结果。

针对性修改方案 #

方案1：直接赋值（最简洁，适合不需要保留原有数组内容的场景）

如果lineChartLabels不需要保留之前的元素，直接把返回的数组赋值给它即可：

public lineChartLabels: Label[] = [];
this.tasks.pipe(map(x => x.map(x => x.id)))
  .toPromise()
  .then(ids => this.lineChartLabels = ids);

方案2：扩展运算符+push（适合需要保留原有元素的场景）

用ES6扩展运算符...把数组拆成单个元素，逐个推入原数组：

public lineChartLabels: Label[] = [];
this.tasks.pipe(map(x => x.map(x => x.id)))
  .toPromise()
  .then(ids => this.lineChartLabels.push(...ids));

方案3：concat合并数组（和方案2效果一致，写法不同）

concat方法会返回一个新数组，把原有元素和新的ID数组合并：

public lineChartLabels: Label[] = [];
this.tasks.pipe(map(x => x.map(x => x.id)))
  .toPromise()
  .then(ids => this.lineChartLabels = this.lineChartLabels.concat(ids));

修改后，每个任务ID就会被存入lineChartLabels的独立索引位置啦！

内容的提问来源于stack exchange，提问作者user16853055