Angular 角垫选择，使用布尔函数选择全部？

如何使用布尔函数实现角度矩阵选择中的全选。 不使用表单标记和表单生成器

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>

---

我们如何实现角度mat select中的“全选”

问题是，启用了多个选项的MatSelect， 获取一个值数组

如果要通过单击一个来切换GLEALLNODE， 您必须调用一个函数来设置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>

（单个值缺少函数后编辑）

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

此处，值用于保留所选节点的结果， 也可以通过将其传递到mat form字段的模板中， 它允许MatSelect正确检查相应的M选项

指向更新的堆栈闪电战的链接：

---

不过，如果你不想使用FormGroup或FormBuilder，我仍然认为你可以使用formControl少一些代码。

Hi，只是问一下，你检查了这个答案吗？我使用材质对树多选做了同样的事情，我不得不模拟mat选项的假值，表示“全部检查”的值，在全球范围内，我做了与这个答案类似的事情，这有帮助吗？我很确定，如果你需要的话，我可以稍后写一个好的答案。我正在努力，我想这可能是你想要的？可以肯定的是，您使用的是模板驱动表单或被动表单，或者仅使用formControl，如果仅使用formControl，则采用模板驱动方式或被动方式？感谢您的编辑，我认为，您离解决方案不远了，只需在.ts中添加一个变量，该变量将映射为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>

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 = [];
   }
 }
}