web-dev-qa-db-ja.com

Angularモデルなしの材料テーブル動的列

angularモデルなしの材料テーブルを使用する必要があります。これは、サービスから何が得られるかわからないためです。

そのため、そのようなコンポーネントでMatTableDataSourceとdisplayedColumnsを動的に初期化しています：

TableComponent：

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

コードの最も重要な部分は次のとおりです。

_for( let v in this.vzfPuanTablo[0]){
    this.displayedColumns.Push(v);
}
_

ここでdisplayedColumnsを動的に作成しています。つまり、何がサービスから来るのかわからなくても、テーブルに表示できます。

たとえば、displayedColumnsは次のようになります。

  • [「1」、「2」、「3」、「4」、「5」]

または

  • [「スタック」、「オーバーフロー」、「ヘルプ」、「私」

しかし、私はそれを処理できるので問題はありません。

しかし、HTMLで表示したい場合は、matCellDefが原因で適切に表示できません。

TableHtml：

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

私の問題はここにあります：

<mat-cell * matCellDef = "let element"> {{element.disCol}} </ mat-cell>

実際、セルに_element."disCol's value"_を表示したいのですが、どうすればいいのかわかりません。

それ以外の場合、この_element."disCol's value"_以外はすべて問題ありません。

_{{element.disCol}}_を使用して_value of element that has disCols's value_を表示すると、次のようにすべてのセルが空になります。

enter image description here

_{{element}}_のみを使用する他の例：

enter image description here

また、ご覧のとおり：

  1. テーブルデータソースは動的に変化しています。それは_{{element.ColumnName}}_を簡単に使用できないことを意味します。何であるかさえわからないからです。

    • 最初の例のdisplayedColumns = ['Vazife'、 'AdSoyad'、 'Kirmizi'、 'Mavi'、 'Yesil'、 'Sari'];
    • 2番目の例のdisplayedColumns = ['Muhasebe'、 'Ders'、 'Egitim'、 'Harici'];

  2. matHeaderCellDefが正しいのは、{{disCol}}を直接使用しているためです。

しかし、disColの値を読み取り、セルにelement.(disCol's value)を表示する必要があります。

どうすればそれができますか？

dynamicinterfaceangular-materialdatasource
11
mevaka

私は解決策を見つけました:)それは非常に簡単ですが、最初は見えませんでした:)そのようにのみ：

        <mat-cell *matCellDef="let element "> {{element[disCol]}}
        </mat-cell>

{{element[disCol]}}はHTMLでのみ使用する必要があります。

今、すべてが大丈夫です:)

20
mevaka

@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>
_
2
Jack