typescript - วิธีเพิ่มเนื้อหาแบบคงที่ในตาราง angular mat-table แนวนอนของฉัน?

ฉันเปลี่ยนคอลัมน์ทิศทางใน mat-table และหลังจากนั้นฉันก็ไม่สามารถเพิ่ม ng-container ลงในตารางได้ ฉันทำแบบนี้แล้ว ในกรณีนี้ฉันจะเพิ่มแถวที่กำหนดไว้ล่วงหน้าพร้อมเนื้อหาของฉันได้อย่างไร?

component.ts

export class MyComponent implements OnInit {
    displayedColumns: string[] = ['position', 'name', 'weight', 'symbol', 'actions'];
    dataSource = ELEMENT_DATA;
    fourthFormGroup: FormGroup;
    displayColumns: string[];
    displayData: any[];

    constructor(
        private _formBuilder: FormBuilder
    ) { }

    ngOnInit() {
        this.displayColumns = ['0'].concat(this.dataSource.map(x => x.position.toString()));
        this.displayData = this.displayedColumns.map(x => this.formatInputRow(x));
        this.fourthFormGroup = this._formBuilder.group({});
    }

    formatInputRow(row) {
        const output = {};

        output[0] = row;
        for (let i = 0; i < this.dataSource.length; ++i) {
            output[this.dataSource[i].position] = this.dataSource[i][row];
        }

        return output;
    }
}

component.html

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

    <!-- Position Column -->
    <ng-container [matColumnDef]="column" *ngFor="let column of displayColumns">
        <th mat-header-cell *matHeaderCellDef> {{ column }} </th>
        <td mat-cell *matCellDef="let element"> {{ element[column] }} </td>
    </ng-container>

    <!-- Below Colunm doesn't show -->
    <ng-container matColumnDef="actions">
        <th mat-header-cell *matHeaderCellDef>Actions </th>
        <td mat-cell *matCellDef="let element">
            <button (click)="accept($event)">Accept</button>
            <button (click)="remove($event)">Remove</button>
        </td>
    </ng-container>

    <tr mat-row *matRowDef="let row; columns: displayColumns"></tr>
</table>

คำตอบ #1

การเพิ่ม ng-container จะเป็นการเพิ่ม matColumnDef ใหม่ คุณไม่ต้องการคอลัมน์ แต่คุณต้องการแถวใหม่เพื่อแสดง

เนื่องจากคุณเพียงแค่แมป displayColumns ของคุณเพื่อให้กลายเป็นหัวตาราง "แนวนอน" ใหม่ของคุณ คุณสามารถเพิ่ม actions ที่นั่นเพื่อดูแถวใหม่ได้

displayedColumns: string[] = ['position', 'name', 'weight', 'symbol', 'actions'];

ตอนนี้ในการแสดงเนื้อหาคงที่ของคุณ เราจำเป็นต้องแก้ไขเทมเพลตของคุณ เราทราบว่า header ตารางแบบ "แนวนอน" อยู่ใน element[0] เราสามารถใช้สิ่งนี้กับ *ngIf เพื่อแสดงแถวใหม่ได้อย่างถูกต้อง

<ng-container [matColumnDef]="column" *ngFor="let column of displayColumns">
    <th mat-header-cell *matHeaderCellDef> {{ column }} </th>
    <td mat-cell *matCellDef="let element">
        <span *ngIf="column == 0 || element[0] !== 'actions'; else actions">{{ element[column] }}</span>
        <ng-template #actions>
            <button (click)="accept($event)">Accept</button>
            <button (click)="remove($event)">Remove</button>
        </ng-template>
    </td>
</ng-container>

นี่คือตัวอย่างการทำงานบน StackBlitz

คำตอบ #2

โค้ดด้านล่างใช้งานได้ดีสำหรับฉัน

<ng-container [matColumnDef]="column" *ngFor="let column of displayColumns">
    <th mat-header-cell *matHeaderCellDef> {{ column }} </th>
    <td mat-cell *matCellDef="let element">
        <span *ngIf="column!= 'actions'; else actions">{{ element[column] }}</span>
        <ng-template #actions>
            <button (click)="accept($event)">Accept</button>
            <button (click)="remove($event)">Remove</button>
        </ng-template>
    </td>
</ng-container>