时间戳

首页 > 解决方案 > 如何使用带条件的 mat 表扩展行

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

问题描述

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

'APP', 'LOG', ...有不同serverdiskType.name.value的选择，有一个特定的选项是'CUSTOM'。

我希望在选择 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>

标签： angularangular-materialexpand

解决方案

您需要像下面那样处理扩展。表达式将是

[@detailExpand]="element.diskType == 'custom' ? 'expanded' : 'collapsed'">

<ng-container matColumnDef="expandedDetail">
    <td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplay.length">
      <div class="example-element-detail"
           [@detailExpand]="element.diskType == 'custom' ? 'expanded' : 'collapsed'">
        <div class="example-container">
                <mat-form-field>
                  <input matInput [(ngModel)]="element.ioPerMonth" name="element.ioPerMonth" placeholder="IO/month">
                </mat-form-field>

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

工作演示在这里.. https://stackblitz.com/edit/angular-94fmby 希望这会有所帮助。

推荐阅读