angular - N 个 Mat 表的数据源数组

Question

我想dynamically根据我通过 API 的服务接收的 JSON 字符串创建 N 个表。

我的字符串看起来像：

CPU: Type - Snapdragon// Cores - 8 :: Ram: Total Memory - 8 GB

我认为这是我的代码中最相关的部分：

  tableHeaders:string[]=[];
  dataSource: Spec[] = [];
  populateDataSource(value:any){
 
    const object:any=value[0]; 
    this.product=object;

    const specs=object.specs;
  
    const spec: Spec[]=[];

    let bigSplit=specs.split("::");

    bigSplit.forEach((bigElement: string) => 
    {
        let colonSplit=bigElement.split(":");

        this.tableHeaders.push(colonSplit[0]); //here i'm storing what's before colon (ex: CPU, Ram)
        //keep splitting the string....
        let doubleSlashSplit=colonSplit[1].split("//");

        doubleSlashSplit.forEach((doubleSlashElement:string)=>
        {
          let minusSplit=doubleSlashElement.split("-");
          
          spec.push({property1:minusSplit[0],property2:minusSplit[1]});
        })
    });

    this.dataSource=spec;
    console.log(this.dataSource);
  }

到目前为止，我能够做到这一点：

CPU
Type           Snapdragon
Cores          8
Total Memory   12GB

RAM
Type           Snapdragon
Cores          8
Total Memory   12GB

我真正想要的是：

CPU
Type           Snapdragon
Cores          8

RAM
Total Memory   12GB

我想不出一种dataSources为我的表动态创建 N 的方法，或者如果您能提出更好的方法，我将不胜感激。

我附上了一个截图，这样你就可以清楚地看到我在说什么。 表

标签： angulartypescriptmat-table