javascript - 在表格中使用带有角材料的表格

Question

我需要使用Table with expandable rows角材料。

我的清单有childes。

如果我的列表childes有一个值必须是该行expanded并显示childes其他行上的项目。

例如 ：

这是我的清单，我这样填写：

{
    title:'one',
    id:1,
    childes:
        [{
            title:'chiled one',
            id:2,
            childs:null
        },
        {
            title:'chiled one',
            id:2,
            childs:null
        }]
}

这是html：

  <table mat-table [dataSource]="dataSource" multiTemplateDataRows class="mat-elevation-z8">
        <ng-container matColumnDef="{{column}}" *ngFor="let column of displayedColumns">
            <th mat-header-cell *matHeaderCellDef> {{column}} </th>
            <td mat-cell *matCellDef="let element"> {{element[column]}} </td>
        </ng-container>

        <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
        <ng-container matColumnDef="expandedDetail">
            <td mat-cell *matCellDef="let element" [attr.colspan]="displayedColumns.length">
                <div class="example-element-detail"
                    [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
                    <ng-container matColumnDef="customColumn1">

                </div>
            </td>
            <!-- actions -->
            <ng-container matColumnDef="actions">
                <th mat-header-cell *matHeaderCellDef>
                    {{ 'GENERAL.ACTIONS' | translate }}
                </th>

                <td mat-cell *matCellDef="let row; let i=index;">
                    <a mat-icon-button [matTooltip]="'TOOLTIP.DETAIL' | translate">
                        <mat-icon aria-label="Show" (click)="showDetail(row)" class="ic-defualt">remove_red_eye
                        </mat-icon>
                    </a>

                    <a mat-icon-button color="primary" [matTooltip]="'TOOLTIP.EDIT' | translate" uaccess
                        [routerLink]="['/offline/lesson/',row.courseId,row.id,'edit']">
                        <mat-icon aria-label="Edit">edit</mat-icon>
                    </a>
                    <a mat-icon-button [matTooltip]="'TOOLTIP.COMMENTS' | translate">
                        <i class="far fa-comments" (click)="goToCommentList(row.title,row.id)"></i>
                    </a>
                    <a mat-icon-button [matTooltip]="'TOOLTIP.LIKE' | translate">
                        <i class="far fa-thumbs-up" (click)="openLikeList(row.id,row.title)"></i>
                    </a>
                    <button mat-icon-button color="accent" [matTooltip]="'TOOLTIP.DELETE' | translate" uaccess
                        (click)="delete(row.id)">
                        <mat-icon aria-label="Delete">delete</mat-icon>
                    </button>
                </td>
            </ng-container>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let element; columns: displayedColumns;" class="example-element-row"
            [class.example-expanded-row]="expandedElement === element"
            (click)="expandedElement = expandedElement === element ? null : element">
        </tr>
        <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
    </table>

但现在我有这个问题：

childes当表单为expanded?????时，我如何显示行中的列表

标签： javascriptangulartypescriptangular-material