如何从数组中返回以逗号分隔的值？

Question

我在 angular 上工作 7 我面临问题：我无法用逗号将 ZCO 的返回值与 OriginCountry 分开。

原产国是一个 object 的数组我需要从中收集财产 ZCO

当它有多个值时用逗号分隔，那么如何做到这一点？

在 component.ts 上

OriginCountry:any[]=[];  
this.OriginCountry = this.partDetailsService.currentData.OriginCountry;  
console.log("country origion" + JSON.stringify(this.OriginCountry) )

从 OriginCountry 返回的数据如下：

[
  { CO: "zx", ZCO: "China", InfSrc: "FMD", TP: "Factory" },
  { CO: "zy", ZCO: "Japan", InfSrc: "FMD", TP: "Factory" }
];

ON 组件.html

<div *ngFor="let country of OriginCountry">
  {{country.ZCO}}
</div>

预期结果为：

Japan,China

Answer 1

你甚至不需要ngFor 。

const csv = [
             {"CO":"zx","ZCO":"China","InfSrc":"FMD","TP":"Factory"}, 
             {"CO":"zy","ZCO":"Japan","InfSrc":"FMD","TP":"Factory"}
            ]
            .map(({ZCO}) => ZCO).join();

接着：

<div>
  {{csv}}
</div>

Answer 2

其他解决方案，这依赖于reduce

 const csv = [ {"CO":"zx","ZCO":"China","InfSrc":"FMD","TP":"Factory"}, {"CO":"zy","ZCO":"Japan","InfSrc":"FMD","TP":"Factory"} ].reduce((ZCOs, co) => [...ZCOs, co.ZCO], []).join(', '); console.log(csv);