角度材料字符串数组到预多选垫选择以更用户友好的格式显示数据

Question

想要在 mat-select 中显示一个字符串数组。该 mat-select 应将数据显示为预选（多个）格式。通过单击它，应显示选项，但不应进行任何更改。 mat-select 是 mat-table 条目的一部分，应该只是在 html-template-code 中定义的 view-cell（不应更改 table-data-source 的数据）。

以angular-material-select-documentation为例，但甚至无法让它显示数据，而无需手动选择。

<ng-container matColumnDef="letters">
  <th mat-header-cell *matHeaderCellDef>Letters</th>
  <td mat-cell *matCellDef="let data; let i = index;">
    <mat-form-field>
      <mat-label></mat-label>
      <mat-select multiple [ngModel]="data.letters">
        <mat-option *ngFor="let letter of data.letters" checked disabled>
          {{letter}}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </td>
</ng-container>

Answer 1

您可以通过将value 添加到选择的模型中来“检查”多选控件中的选项：

<ng-container matColumnDef="letters">
  <th mat-header-cell *matHeaderCellDef>Letters</th>
  <td mat-cell *matCellDef="let data; let i = index;">
    <mat-form-field>
      <mat-label></mat-label>
      <mat-select multiple [ngModel]="data.letters">
        <mat-option *ngFor="let letter of data.letters" [value]="letter" disabled>
          {{letter}}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </td>
</ng-container>