如何默认选中复选框？<mat-list-option>, Angular 材质

Question

我有以下 HTML 组件：

<mat-selection-list #shoes>
  <mat-list-option  *ngFor="let shoe of typesOfShoes">
    {{shoe.title}}
  </mat-list-option>
</mat-selection-list>

<pre>
  Options selected: {{this.result | json}}
</pre>

这是 ts 组件，它包含一个数组，其中包含发送到 HTML 组件的数据。

ngOnInit() {
this.typesOfShoes = [
  {
    id: 1,
    title: 'Aaa',
    checked: true,
  },
  {
    id: 2,
    title: 'Bbb',
    checked: false,
  },
  {
    id: 3,
    title: 'Ccc',
    checked: true,
  },
  {
    id: 4,
    title: 'Ddd',
    checked: false,
  },
];
}

我在StackBlitz 中留下了该项目的链接

Answer 1

每个文档

mat-list-option 有一个 selected 属性，您可以为其分配一个布尔值。

所以这样的事情应该有效。

<mat-selection-list #shoes>
  <mat-list-option  *ngFor="let shoe of typesOfShoes" [selected]="shoe.checked">
    {{shoe.title}}
  </mat-list-option>
</mat-selection-list>