Question

我有一张垫子桌。

数据来自json：

myData=[{
    name: 'MyName1', 
    options: [{
       optionName: 'option1 name'    
    },{
       optionName: 'option2 name'
    }]
  }, {
    name: 'MyName2',
    options:[]
}]
dataSource = new MatTableDataSource<MyData>(myData));

取决于options.length mat-cell更改：

<mat-table #table [dataSource]="dataSource">
   <ng-container matColumnDef="options">
       <mat-header-cell *matHeaderCellDef> Options </mat-header-cell>
       <mat-cell *matCellDef="let element">
            <ng-container *ngIf="element.options.length > 0; then div1; else div2"></ng-container>
       </mat-cell> 
   </ng-container>
</mat-table>

<ng-template #div1>
   <div> with options {{element.name}}</div
</ng-template>
<ng-template #div2>
   <div> no options {{element.name}}</div
</ng-template>

我的错误

TypeError: Cannot read property 'name' of undefined

所以，我应该将“元素”从ngIf传递到我的ng-templates，但我找不到怎么做。

Answer 1

你应该有类型安全?

<ng-template #div1>
   <div> with options {{element?.name}}</div
</ng-template>
<ng-template #div1>
   <div> no options {{element?.name}}</div
</ng-template>

Answer 2

你可以这样做吗？它可能不那么优雅，但它应该是有用的。

   <mat-table #table [dataSource]="dataSource">
       <ng-container matColumnDef="options">
           <mat-header-cell *matHeaderCellDef> Options </mat-header-cell>
           <mat-cell *matCellDef="let element">
                <div *ngIf="element.options.length > 0">
                  <div> with options {{element.name}}</div
                </div>
                <div *ngIf="element.options.length == 0>
                  <div> no options {{element.name}}</div
                </div>
           </mat-cell> 
       </ng-container>
    </mat-table>

编辑：我之前有一个答案，但我意识到这是错误的，并将其替换为此。

Answer 3

我找到了，我的问题是我在循环外定义了ng-template。

应该是：

 <mat-table #table [dataSource]="dataSource">
   <ng-container matColumnDef="options">
       <mat-header-cell *matHeaderCellDef> Options </mat-header-cell>
       <mat-cell *matCellDef="let element">
            <ng-container *ngIf="element.options.length > 0; then div1; else div2"></ng-container>
                <ng-template #div1>
                   <div> with options {{element.name}}</div>
                 </ng-template>
                 <ng-template #div2>
                     <div> no options {{element.name}}</div>
                 </ng-template>
       </mat-cell> 
   </ng-container>
</mat-table>

访问元素数据

3 个答案: