Как условно изменить содержимое строки mat-cell, когда значения ячеек столбца отображаются динамически

Question

Я визуализировал значения ячеек столбца динамически через mat-table, и мое требование состоит в том, чтобы отображать содержимое mat-cell по-разному в зависимости от значения ячейки столбца.

Я новичок в angular и перепробовал все возможные вариантырешения, которые я видел в Google, но не помогли мне.

Учитывая, что значения ячеек в 2 столбцах отображаются динамически 1. DealerSize 2. Основной доход

Содержимое вышеуказанных значений столбцов в двух соответствующих столбцах должно отличаться. 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>

Вы можете определить шаблон для двух столбцов. Давай встретимся узнай если ты этого хотел. Если нет, создайте стекаблиц (https://stackblitz.com/edit/angular) или что-то в этом роде, чтобы воспроизвести ваши потребности.