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

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

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

Учитывая, что у меня есть 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>

angular angular-material-table
person Kireeti    schedule 12.10.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Итак, что касается вашей логики, вы можете сделать что-то вроде этого:

<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) или что-то вроде это для того, чтобы воспроизвести вашу потребность.

person Yvan    schedule 13.10.2019
comment
Привет, спасибо за ответ на мой запрос. Вот проект stackbliz - stackblitz.com/edit/angular-kezcsa. Я верю в то, что ваш подход придерживается статического подхода. Пожалуйста, взгляните на мой проект, чтобы мне было легко сообщить вам о моих требованиях. Большое спасибо - person Kireeti; 13.10.2019
comment
Я попытаюсь обновить ваш stackblitz, но вы используете матовый стол как-то странно. - person Yvan; 13.10.2019
comment
stackblitz.com/edit/angular-dwvtsw дайте мне знать, если вы этого хотели. - person Yvan; 13.10.2019
comment
Привет, братан ...... извините за поздний ответ, не удалось вернуться к нему после того, как взгляните на ваш код. Ваш подход работает для меня .. я мог бы решить мою проблему для реальных требований, большое спасибо. - person Kireeti; 22.10.2019
comment
Не беспокойтесь, рад помочь вам :) - person Yvan; 25.10.2019