默认情况下如何选择一个复选框？ <mat-list-option>，角材料

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

中留下了项目的链接

enter image description here

Answer 1

Per Docs

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

所以这样的事情应该起作用。

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