如何有条件地更改 mat-cell 行的内容，因为列单元格值被动态显示

Question

我已通过 mat-table 动态呈现列单元格值，我的要求是根据呈现的列单元格值以不同方式显示 mat-cell 的内容。

我是 angular 的新手，我已经尝试了我在 google 中看到的所有可能的解决方案，但没有帮助我。

考虑到我有 2 列单元格值动态呈现 1. 经销商规模 2.Major 收入

以上两列的内容基于单元格值应该是不同的。 DealerSize - 用户应该能够看到复选框，主要收入 - 用户应该能够输入最小值和最大值。

我在下面给出了复选框以及最小值和最大值的代码

如果有一种方法可以按照我们的需要呈现行单元格数据代码，请帮助我。提前致谢。

          <mat-cell *matCellDef="let element">
            <!-- below content should be displayed if column-1 cell value == "DealerSize"-->
            <div fxLayout fxLayoutGap="10px" fxLayoutAlign="center cener">
              <div *ngFor="let object of items; let i = index">
                <mat-checkbox>{{ object.text }}</mat-checkbox>
              </div>
            </div>
            <!-- below content should be displayed if column-2 cell value == "Major Revenue" -->
            <div fxLayout fxLayoutGap="10px" fxLayoutAlign="center cener">
              <div>
                <mat-form-field class="width">
                  <input matInput placeholder="Min Value" />
                </mat-form-field>
              </div>
              <div>
                <mat-form-field class="width">
                  <input matInput placeholder="Max Value" />
                </mat-form-field>
              </div>
          </mat-cell>

Answer 1

因此，根据您的逻辑，您可以这样做：

<table mat-table [dataSource]="dataSource">

      <!-- col DealerSize -->
      <ng-container matColumnDef="position">
        <th mat-header-cell *matHeaderCellDef> DealerSize </th>
        <td mat-cell *matCellDef="let element"> 
       <mat-checkbox>{{ object.text }}</mat-checkbox>
      </td>
      </ng-container>

      <!-- col Major Revenue -->
      <ng-container matColumnDef="position">
        <th mat-header-cell *matHeaderCellDef> DealerSize </th>
        <td mat-cell *matCellDef="let element"> 
              <div>
                <mat-form-field class="width">
                  <input matInput placeholder="Min Value" />
                </mat-form-field>
              </div>
              <div>
                <mat-form-field class="width">
                  <input matInput placeholder="Max Value" />
                </mat-form-field>
              </div>
      </td>
      </ng-container>

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

您可以为两列定义模板。让 met 知道这是否是您想要的。如果没有，请创建一个 stackblitz (https://stackblitz.com/edit/angular) 或类似的东西来重现您的需求。

如何有条件地更改 mat-cell 行的内容，因为列单元格值被动态显示

How to change content of mat-cell row conditionally where as column cell values gets displayed dynamically

angular

angular-material-table