内置的deselectAll方法无法在多个Angular Mat-Selection-List中使用

Question

我正在使用angular5 mat-selection-list在同一组件中创建多个组件。

list-selection-example.html

 Shoes: 
<mat-selection-list #shoes>
  <mat-list-option *ngFor="let shoe of typesOfShoes" 
                   [value]="shoe">
    {{shoe}}
  </mat-list-option>
</mat-selection-list>

<button mat-button  (click)="deselectShoes()">Deselect all Shoes</button>

Cloths: 
<mat-selection-list #cloths>
  <mat-list-option *ngFor="let cloth of typesOfCloths" 
                   [value]="cloth">
    {{cloth}}
  </mat-list-option>
</mat-selection-list>

<button mat-button  (click)="deselectCloth()">Deselect all Cloths</button>

列表选择示例

export class ListSelectionExample {
  typesOfShoes = ['Boots', 'Clogs', 'Loafers', 'Moccasins', 'Sneakers'];

  typesOfCloths = ['Amaxa', 'Cotton', 'Woolen', 'Nylon'];

    @ViewChild(MatSelectionList) shoes: MatSelectionList;
    @ViewChild(MatSelectionList) cloths: MatSelectionList;


  deselectShoes(){
    this.shoes.deselectAll(); 
  }

  deselectCloth(){
    this.cloths.deselectAll(); 
  }
  ngOnInit(){

  }
}

这是完整的代码：https : //stackblitz.com/edit/angular-i3pfu2-dla3rd?file=app%2Flist-selection-example.ts

在此示例中，deselectShoes()方法按预期工作。但deselectCloth()在不工作的，因为只有预期的，其取消选择的鞋子。

我们该如何解决呢？

Answer 1

您会误解装饰器@ViewChild的工作方式，并且在两个变量中都选择了相同的元素。应该是这样的：

@ViewChild('shoes') shoes: MatSelectionList;
@ViewChild('cloths') cloths: MatSelectionList;

您可以在此处了解更多信息。