内置的 deselectAll 方法在多个 Angular mat-selection-list 中不起作用

Question

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

列表-选择-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>

列表-选择-example.ts

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;

您可以阅读更多相关信息 here。

Answer 2

希望你自己DOM能搞定。

鞋子：

<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)="shoes.deselectAll()">Deselect all Shoes</button>

衣服：

<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)="cloths.deselectAll()">Deselect all Cloths</button>