[解決済み] 角材テーブル ダイナミックカラム モデルなし

質問

モデルなしでアンギュラーマテリアルテーブルを使いたいのですが、サービスから何が出てくるか分からないからです。

を初期化しています。 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 はそのようにすることができます。

• ["one", "two" , "three" , "four" , "five" ]である。

または

• ["スタック","オーバーフロー","ヘルプ","私]。

しかし、私が処理できるので問題ありません。

しかし、それを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" をセル内に表示させたいのですが、どうすればよいのでしょうか？

それ以外は、すべてOKです。 element."disCol's value" のようなものです。

を使用する場合 {{element.disCol}} を表示します。 value of element that has disCols's value というように、すべてのセルが空になってしまいます。

その他の例として {{element}} だけです。

また、ご覧の通り

1. テーブルのデータソースが動的に変化している。つまり {{element.ColumnName}} というのも、それが何なのかさえ分からないからです。

   • 最初の例の displayedColumns = ['Vazife', 'AdSoyad', 'Kirmizi', 'Mavi', 'Yesil', 'Sari']です。
   • 2つ目の例の displayedColumns = ['Muhasebe', 'Ders', 'Egitim', 'Harici'];

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

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

どうすればいいのでしょうか？

どのように解決するのですか？

解決策を見つけました :) とても簡単なのですが、最初は分かりませんでした :) という感じです。

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

を使わなければならない。 {{element[disCol]}} をHTMLの中だけにしてください。

これで、すべてOKです:)