角度垫-选择，选择所有使用布尔函数？

Question

如何用布尔函数实现对角垫的选择。不使用表单标记和表单生成器。

Component.html

<div layout="column" class="mat-cloumn w-25">
  <mat-form-field appearance="fill">
    <mat-label>Location</mat-label>
    <mat-select class="user-control" multiple>
      <mat-option #allSelected (click)="toggleAllSelection()" [value]="0">All</mat-option>
      <mat-option  [value]="store.id" *ngFor="let store of stores">{{ store.name }}</mat-option>
    </mat-select>
  </mat-form-field>
</div>

component.ts

  notSelectedAll = true;

  stores = [
    {id:1,name:'store - 1'},
    {id:2,name:'store - 2'},
    {id:3,name:'store - 3'},
    {id:4,name:'Store - 4'}
  ];

toggleAllSelection(){
  if(this.notSelectedAll = !this.notSelectedAll){
    console.log(false)
  }else{
    console.log(true)
  }
}

我们如何实现选择所有的角度垫-选择

Answer 1

所以问题是，一个具有多重启用功能的MatSelect接受一个值数组，

如果您想通过单击其中一个来toggleAllNode，则必须调用一个函数来设置MatSelect中的所有值，这就是为什么需要另一个变量的原因。

这是你的模板

 <mat-form-field appearance="fill">
 <mat-select [value]='value' class="user-control" multiple>
    <mat-option #allSelected (click)="toggleAllSelection()" [value]="0">All</mat-option>
    <mat-option [value]="store.id" *ngFor="let store of stores"
(click)="valueChange(store.id)" >{{ store.name }}</mat-option>
</mat-select>

和.ts

export class AppComponent {

   value = [];

   selectAll = false;

   stores = [
     { id: 2, name: "store - 1" },
     { id: 3, name: "store - 2" },
     { id: 4, name: "store - 3" },
     { id: 5, name: "Store - 4" }
   ];

  constructor(private fb: FormBuilder) {}

  ngOnInit() {}

  // Function used to properly bind the values on 1 MatOption
  valueChange(id: number) {
  if (this.value.indexOf(id) > -1) {
  //find the index of the element to delete if present
  const pos = this.value.indexOf(id);
  this.value.splice(pos, 1);
  } else {
  // else you push the selected value
  this.value.push(id);
 }
}
  //function to select of deselect All
  toggleAllSelection() {
  this.selectAll = !this.selectAll;
  console.log(this.selectAll);
  if (this.selectAll == true) {
    this.value = [0, 2, 3, 4, 5];
  } else {
    this.value = [];
   }
 }
}

(缺少函数后编辑单个值)。

因为您根本不使用任何形式的角度，所以您需要手工处理所有的操作，以使MatSelect和图形输出之间的值能够正确地通信。

在这里，值用于保存所选节点的结果，但是通过将其传递到mat-form字段的模板中，它允许MatSelect正确地检查相应的MatOptions。

指向更新的堆栈闪存的链接：https://stackblitz.com/edit/angular-material-with-angular-v5-3arsoh?file=app/app.component.html

不过，我认为如果您不想使用formControl或FormBuilder，可以使用更少的代码。