时间戳

首页 > 解决方案 > 如何以角度显示 3 个静态列和其余动态列

javascript - 如何以角度显示 3 个静态列和其余动态列

问题描述

在 Angular 中显示一个具有 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"
  },

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

Connector      Pin        Description     Effectivity-VA305       Effectivity-VA504

D00425B        A03        DME Source              1                    0

D00425B        B03        G/S Source              0                    1

前三列（连接器、引脚、描述）将始终存在，但其他 2 列可以变化，可以是 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>

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

标签： javascripthtmlangulartypescript

解决方案

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

如果使用一系列的复选框，你可以有一些喜欢

<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>

在 .ts 你有

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)
  }

见stackblitz

简要说明。我使用 [ngModel] && (ngModelChange)。是的，您可以使用 [ngModel]="some different a variable"。所以我不需要声明一个额外的变量。在这种情况下，检查显示列（一个数组）是否有一个元素，第一种情况为“名称”，第二种情况为“重量”，最后一种情况为“符号”。

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

推荐阅读