Javascript 如何以角度显示3个静态列和静止动态列

我在以角度显示网格时遇到了一个奇怪的问题，该网格有3个静态列，接下来的列可以是任何动态的

例如，我的后端数据如下所示-

{
    "CONNECTOR": "D00425B",
    "PIN": "A03",
    "DESCRIPTION": "DME Source",
    "EFFECTIVITY - VA305": "1",
    "EFFECTIVITY - VA504": "0"
  },
  {
    "CONNECTOR": "D00425B",
    "PIN": "B03",
    "DESCRIPTION": "G/S Source",
    "EFFECTIVITY - VA305": "0",
    "EFFECTIVITY - VA504": "1"
  },

我希望我的角网格看起来像

Connector      Pin        Description     Effectivity-VA305       Effectivity-VA504

D00425B        A03        DME Source              1                    0

D00425B        B03        G/S Source              0                    1

前三列（连接器、引脚、描述）将始终存在，但其他两列可能会有所不同，可以是2列、3列、4列或n列

例如，如果我的数据是-

{
    "CONNECTOR": "D00425B",
    "PIN": "A03",
    "DESCRIPTION": "DME Source",
    "EFFECTIVITY - VA305": "1",
    "EFFECTIVITY - VA504": "0"
    "EFFECTIVITY - VA385": "1",
  },
  {
    "CONNECTOR": "D00425B",
    "PIN": "B03",
    "DESCRIPTION": "G/S Source",
    "EFFECTIVITY - VA305": "0",
    "EFFECTIVITY - VA504": "1",
    "EFFECTIVITY - VA385": "1",
  },

那么我的网格应该随着-

Connector      Pin        Description     Effectivity-VA305   Effectivity-VA504    EFFECTIVITY -VA385

D00425B        A03         DME Source              1                      0               1


D00425B        B03         G/S Source              0                      1               1

我目前正在获取MatTable类的数据源-

<mat-table id="hexCodeMatTable" class="paddingTable" [ngStyle]="{ 'width.px': innerWidth }" [dataSource]="gridDataSource" matSort style="overflow: auto;">

列的名称为-

<mat-header-row class="headerHeight" *matHeaderRowDef="columnsToDisplay" ></mat-header-row>
 <mat-row *matRowDef="let row; columns: columnsToDisplay"></mat-row>

---

无法实现动态列名，请帮助

这只是一个变量。你想怎么改变

如果正在使用一系列复选框，则可以使用类似的复选框

<input type="checkBox" [ngModel]="displayedColumns.indexOf('name')>=0"
   (ngModelChange)="change($event,'name')">Name
</label>
  <label>
<input type="checkBox" [ngModel]="displayedColumns.indexOf('weight')>=0"
   (ngModelChange)="change($event,'weight')">Weight
</label>
<label>
<input type="checkBox" [ngModel]="displayedColumns.indexOf('symbol')>=0"
   (ngModelChange)="change($event,'symbol')">Symbol
</label>

名称
重量
象征

你有多少

sortedColumns: string[] = ['position', 'name', 'weight', 'symbol']; //<--a duplicate of your displayColumns
change(value:boolean,column:string)
  {
    if (value && this.displayedColumns.indexOf(column)<0)
    {
        this.displayedColumns.push(column);
        this.displayedColumns.sort((a,b)=>this.sortedColumns.indexOf(a)>this.sortedColumns.indexOf(b)?1:-1)
    }
    if (!value && this.displayedColumns.indexOf(column)>=0)
          this.displayedColumns=this.displayedColumns.filter(x=>x!=column)
  }

sortedColumns:string[]=['position'，'name'，'weight'，'symbol']//此.sortedColumns.indexOf（b）？1:-1）
}
如果（！value&&this.displayedColumns.indexOf（column）>=0）
this.displayedColumns=this.displayedColumns.filter（x=>x！=column）
}

看

简短的解释。我使用[ngModel]&（ngModelChange）。是的，您可以使用[ngModel]=“一些不同的变量”。所以我不需要声明额外的变量。在这种情况下，检查displayedColumns（数组）是否有一个元素，第一个元素的名称为“name”，第二个元素的名称为“weigth”，最后一个元素的名称为“symbol”

---

我在ngModelChange中使用相同的函数。如果选中或未选中che复选框，请查看$event是否为true或false。但是我传递了一个额外的参数，即我们可以隐藏/显示的列的名称。

如果您更改变量

columnsToDisplay

mat表不会更改吗-这是您唯一需要的@Eliseo，但是columnsToDisplay值将根据用户的输入而变化，这将是动态的。这是我的问题，如何实现，你希望用户如何更改列显示？我用复选框给出了答案，但我不知道你的要求。不，这不是我的问题。我想你理解错了。无论如何谢谢你我想我知道你想要什么。由于所有数据的表都相同，因此必须创建包含所有可能列的表。然后，当您收到数据时（在订阅中），根据收到的数据更改变量“this.columnsToDisplay”，我认为您可以简单地编写：

this.columnsToDisplay=Object.keys（结果[0]）