角材料选择/全选多选

时间:2021-02-11 22:05:51

标签: angular typescript

我确实为 select 选择了所有选项 现在我有很多选择,但我不知道如何为所有这些选择 我正在使用反应形式

new.ts

 @ViewChild('allSelected') private allSelected: MatOption;

  tosslePerOne(all){
    if (this.allSelected.selected) {
     this.allSelected.deselect();
     return false;
 }
   if(this.newCampaignForm.controls.Branch.value.length==this.centers.length)
     this.allSelected.select();

 }
   toggleAllSelection() {
     if (this.allSelected.selected) {
       this.newCampaignForm.controls.Branch
         .patchValue([...this.centers.map(item => item.id), 0]);
     } else {
       this.newCampaignForm.controls.Branch.patchValue([]);
     }
   }

new.html

<mat-form-field appearance="fill">
  <mat-label>centers</mat-label>
  <mat-select multiple formControlName="Branch">
    <mat-option #allSelected (click)="toggleAllSelection()" [value]="0">All</mat-option>
    <mat-option *ngFor="let item of centers" [value]="item.id" (click)="tosslePerOne(allSelected.viewValue)">{{item.address}}</mat-option>
  </mat-select>
</mat-form-field>


  <mat-form-field appearance="fill">
    <mat-label>Brand</mat-label>
    <mat-select multiple formControlName="Brand">
      <mat-option *ngFor="let item of vehicles" [value]="item">{{item}}</mat-option>
    </mat-select>
  </mat-form-field>

0 个答案:

没有答案
相关问题