0

我正在使用 angular5mat-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()没有按预期工作，仅取消选择鞋子 。

我们如何解决这个问题？

4

2 回答 2

7

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

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

你可以在这里阅读更多关于它的信息。

于 2018-04-09T11:34:34.613 回答
0

我希望您可以在 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>
于 2020-03-31T16:19:37.433 回答