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是如何工作的，并且在两个变量中你选择了相同的元素。它应该是这样的：

EquipmentDataProvider edp=new EquipmentDataProvider();

IEquipmentDataProvider da=(IEquipmentDataProvider)edp; // An explicit method invocation to ensure that the EquipmentataProvider's GetEquipment and not some other Equipment class' GetEquipment is called. This is what is the intent of the

Equipment eq = da.GetEquipment<Equipment>("somepath");

您可以详细了解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>

内置deselectAll方法不适用于多个Angular mat-selection-list

2 个答案: