如何使用带有条件的mat表扩展行

Question

我有一个表，该表具有不同的列，并且有一个列包含来自Material for Angular的<mat-select>和<mat-option> html标签。

[有不同的serverdiskType.name.value，例如'APP'，'LOG'，...，并且有一个特定的选项是'CUSTOM'。

我希望在选择“自定义”选项时扩展行，如何执行此操作？

我的代码：

我的模板：

 <table mat-table *ngIf=" resources.length>1" multiTemplateDataRows [dataSource]="dataSourceDisk" >

<!-- DiskType Column -->
        <ng-container matColumnDef="Type">
          <th mat-header-cell *matHeaderCellDef fxFlex="110px"> Disk Type </th>
          <td mat-cell (click)="$event.stopPropagation()" *matCellDef="let resources; let i=index; let element " fxFlex="110px">
            <mat-form-field>
              <mat-select placeholder="Storage Performance" [(ngModel)]="resources.resourceProperties.storageClass"
                [ngModelOptions]="standalone: true"
                (ngModelChange)="onChangeResourceProperties($event,'storageClass',i+1)">
                <mat-option *ngFor="let serverdiskType of serverdiskTypes" [value]="serverdiskType.name.value" 
                (click)="EXPAND THE ROW WHEN serverdiskType.name.value EQUALS TO 'CUSTOM'">
                   serverdiskType.name.viewValue 
                </mat-option>
              </mat-select>
            </mat-form-field>
          </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 disk" [attr.colspan]="displayedDiskColumns.length">
            <div class="example-element-detail" [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
              <div class="example-container">
                <mat-form-field>
                  <input matInput [(ngModel)]="disk.resourceProperties.ioPerMonth" name="ioPerMonth" placeholder="IO/month">
                </mat-form-field>

                <mat-form-field>
                  <input matInput [(ngModel)]="disk.resourceProperties.iops" name="iops" placeholder="IO/S">
                </mat-form-field>
              </div>
            </div>
          </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedDiskColumns"></tr>
        <tr mat-row *matRowDef="let element; columns: displayedDiskColumns;" 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>