代码之家  ›  专栏  ›  技术社区  ›  Anil Arya

内置的“取消所有”方法在多角度材质选择列表中不起作用

  •  0
  • Anil Arya  · 技术社区  · 7 年前

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

    列出选择示例。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>
    

    列出选择示例。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() 按预期工作,仅取消选择鞋子。

    我们如何解决这个问题?

    2 回复  |  直到 7 年前
        1
  •  7
  •   AntonioGarcía    7 年前

    您误解了decorator@ViewChild的工作方式,并且在这两个变量中选择了相同的元素。应该是这样的:

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

    你可以了解更多 here

        2
  •  0
  •   Gokul    5 年前

    我希望您可以在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>