angular material string-array 到 pre-multi-selected mat-select 以更用户友好的格式显示数据

Question

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

以angular-material-select-文档为例，但即使不手动select它也无法显示数据。

<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 添加到 select 的模型，您可以在多 select 控件中 "check" 选项：

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

angular material string-array 到 pre-multi-selected mat-select 以更用户友好的格式显示数据

angular material string-array to pre-multi-selected mat-select to display data in more user-friendly format

arrays

drop-down-menu

angular-material

angular

mat-table