如何 return 数组中用逗号分隔的值？

Question

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

Origin Country 是一个对象数组，我需要从中收集 属性 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" }
];

开Component.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);