Dynamic 无模型的角度材质表动态列

我需要使用没有模型的角材料台，因为我不知道服务会带来什么

因此，我在组件中动态初始化我的

MatTableDataSource

和

displayedColumns

，如下所示：

表格组件：

ngOnInit() {

this.vzfPuanTablo = [] //TABLE DATASOURCE

//GET SOMETHING FROM SERVICE 
this.listecidenKisi = this.listeciServis.listecidenKisi;
this.listecidenVazife = this.listeciServis.listecidenVazife;

//FILL TABLE DATASOURCE 
var obj = {};
for (let i in this.listecidenKisi ){
    for( let v of this.listecidenVazife[i].vazifeSonuclar){
        obj[v.name] = v.value;
    }
    this.vzfPuanTablo.push(obj);
    obj={};
}

//CREATE DISPLAYED COLUMNS DYNAMICALLY
this.displayedColumns = [];
for( let v in this.vzfPuanTablo[0]){
    this.displayedColumns.push(v);
}

//INITIALIZE MatTableDataSource
this.dataSource = new MatTableDataSource(this.vzfPuanTablo);
}

    <mat-table #table [dataSource]="dataSource" class="mat-elevation-z8">

        <ng-container *ngFor="let disCol of displayedColumns; let colIndex = index" matColumnDef="{{disCol}}">
            <mat-header-cell *matHeaderCellDef>{{disCol}}</mat-header-cell>
            <mat-cell *matCellDef="let element "> {{element.disCol}}
            </mat-cell>
        </ng-container>

        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
    </mat-table>

---

代码最重要的部分如下所示：

我在这里动态创建

displayedColumns

，这意味着；即使我不知道服务会带来什么，我也可以在表格中显示出来

例如，

displayedColumns

可以是这样的：

• [“一”、“二”、“三”、“四”、“五”]

或

• [“堆栈”、“溢出”、“帮助”、“我]

但这不是问题，因为我能处理

---

但是当我想在HTML中显示它时，我无法正确显示，因为

matCellDef

东西：

表格HTML:

ngOnInit() {

this.vzfPuanTablo = [] //TABLE DATASOURCE

//GET SOMETHING FROM SERVICE 
this.listecidenKisi = this.listeciServis.listecidenKisi;
this.listecidenVazife = this.listeciServis.listecidenVazife;

//FILL TABLE DATASOURCE 
var obj = {};
for (let i in this.listecidenKisi ){
    for( let v of this.listecidenVazife[i].vazifeSonuclar){
        obj[v.name] = v.value;
    }
    this.vzfPuanTablo.push(obj);
    obj={};
}

//CREATE DISPLAYED COLUMNS DYNAMICALLY
this.displayedColumns = [];
for( let v in this.vzfPuanTablo[0]){
    this.displayedColumns.push(v);
}

//INITIALIZE MatTableDataSource
this.dataSource = new MatTableDataSource(this.vzfPuanTablo);
}

    <mat-table #table [dataSource]="dataSource" class="mat-elevation-z8">

        <ng-container *ngFor="let disCol of displayedColumns; let colIndex = index" matColumnDef="{{disCol}}">
            <mat-header-cell *matHeaderCellDef>{{disCol}}</mat-header-cell>
            <mat-cell *matCellDef="let element "> {{element.disCol}}
            </mat-cell>
        </ng-container>

        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
    </mat-table>

{{disco}}
{{element.disco}}

我的问题是：

{{element.disco}

事实上，我想在单元格中显示

元素。“disco的值”

，但我不知道如何才能做到这一点

否则，除了这个

元素，“disco的价值”这个东西，一切都正常


当我使用
{{element.disCol}
显示具有disCols值的元素的
值时，所有单元格都是空的，如下所示：


仅使用
{{element}}
的其他示例：



您也可以看到：

表数据源正在动态更改。这意味着我不能轻松地使用
{{element.ColumnName}
，因为我甚至不知道它是什么


第一个示例的displayedColumns=['Vazife'，'AdSoyad'，'Kirmizi'，'Mavi'，'Yesil'，'Sari']
第二个示例的displayedColumns=['Muhasebe'，'Ders'，'Egitim'，'Harici']

matHeaderCellDef
是正确的，因为它直接使用{{disco}}

但是我需要读取disco的值，并在单元格中显示
元素（disco的值）

我该怎么做呢？我找到了解决方案：）
这很简单，但一开始我看不见：）
只有这样：

{{element[disco]}

我必须仅在HTML中使用
{{element[disco]}

现在，一切都好了：）
查看基于@mevaka的完整工作示例

其中
jobDetails$
是项的数组

columns$
等同于
Object.keys（jobDetails$[0]）
所以它只是一个
string[]

  <table mat-table [dataSource]="jobDetails$ | async">

    <ng-container *ngFor="let disCol of (columns$ | async); let colIndex = index" matColumnDef="{{disCol}}">
      <th mat-header-cell *matHeaderCellDef>{{disCol}}</th>
      <td mat-cell *matCellDef="let element">{{element[disCol]}}</td>
    </ng-container>


    <tr mat-header-row *matHeaderRowDef="(columns$ | async)"></tr>
    <tr mat-row *matRowDef="let row; columns: (columns$ | async)"></tr>
  </table>


{{disco}}
{{element[disco]}
我已尽最大努力将动态表缩减到最小值。此示例将显示给定带有任何键的平面对象数组的任何列。请注意，第一个对象如何具有额外的“foo”属性，从而导致创建整个列。数据常量可以是从服务获得的一些数据。此外，您还可以添加column ID->label“映射到这个，如果你知道一些常见的属性名，你将得到JSON。请参阅stachblitz


从'@angular/core'导入{Component，ViewChild，OnInit}；
常量数据：任意[]=[
{位置：1，名称：'sdd'，重量：1.0079，符号：'H'，foo:'bar'}，
{位置：2，名称：'氦'，重量：4.0026，符号：'他'}，
{位置：3，名称：'锂'，重量：6.941，符号：'锂'}，
{位置：4，名称：'铍'，重量：9.0122，符号：'铍'}，
{位置：5，名称：'硼'，重量：10.811，符号：'B'}，
{位置：6，名称：'Carbon'，重量：12.0107，符号：'C'}
];
@组成部分({
选择器：“动态表示例”，
样式URL:['dynamic-table-example.css']，
templateUrl:'dynamic table example.html'，
})
导出类DynamicTableExample实现OnInit{
列：数组
displayedColumns:数组
数据源：任何
恩戈尼尼特（）{
//通过收集在数据中找到的对象的唯一键来获取列列表。
常量列=数据
.reduce（（列，行）=>{
返回[…列，…对象.键（行）]
}, [])
.reduce（（列，列）=>{
返回列。包括（列）
？立柱
：[…列，列]
}, [])
//请描述以下列：。
this.columns=columns.map（column=>{
返回{
columnDef:column，
标题：列，
单元格：（element:any）=>`${element[列]？element[列]：`}
}
})
this.displayedColumns=this.columns.map（c=>c.columnDef）；
//为设置数据源。
this.dataSource=DATA
}
}

{{column.header}}
{{column.cell（row）}

{{element[disco]}
您能给我发送完整的示例代码，以便从API创建动态列并填充吗grid@Uttam我在下面添加了一个完整的例子，感谢你指出了一个简洁明了的答案。我正准备再次深入研究“角度性”“：-）@mevaka，请提供创建动态列的完整代码。我在添加列时面临这个问题。我正在添加基于按钮单击的列。我的意思是如果有5个按钮是dere。单击每个按钮，列将被添加，行也将增加。如果我添加5列，将有5行，但我只需要一行。@srikanth要添加到您想要显示的列上，请按（“newcols”）
如果我们有一个动态表，我们可以使用css应用不同的列大小吗？我想将我的静态表转换为动态表，以支持两种不同的视图。@ChandreshMishra我不明白为什么不能，请早给我！但是在哪里以及如何将css类应用为tr和td将由ngFor生成？在抽象行模型中添加一个“数据类型”属性，该属性可用于为每个数据和标题单元格生成css类。例如，数字类型sho