2

我已经动态地渲染了列单元格值mat-table，我的要求是mat-cell根据渲染的列单元格值显示不同的内容。

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

考虑到我有 2 列单元格值动态呈现 1. DealerSize 2.Major Revenue

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

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

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

          <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>
4

1 回答 1

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>

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

于 2019-10-13T00:15:05.717 回答