Angular2多选检查多重绑定答案

【问题标题】：Angular2 Multi-Select Check Multiple BindingAngular2多选检查多重绑定
【发布时间】：2018-09-12 23:41:21
【问题描述】：

我正在尝试创建具有层次结构的多选小部件。

食物
- 培根
- 华夫饼
汽车
- 火柴盒
- 福特

这种：如果您选择食物，那么培根和华夫饼也会被选中，如果您取消选中华夫饼，那么食物也未选中，但培根保持不变。

有很多类似的问题，所以我很难评估任何更复杂的解决方案。我试图从概念上理解这在 Angular 中是如何工作的。

鉴于这个伪模型：

options = [
  {"name":"Food", "children": ["Bacon","Waffles"], "parent": null},
  {"name":"Bacon", "children": [], "parent": "Food" }  
  {"name":"Waffles", "children": [], "parent": "Food" }  
];

value = [];

我很容易确定选择 Food 时的值应该是：Food, Bacon, Waffles，而未选择 Waffles 时的值应该是 Bacon

我希望表单的一个输入会导致模型的多项更改反映在表单上。

在 Angular2 中是如何表达的？绑定到表单会立即对模型进行 1 次更改，然后我可以使用 setTimeout 之类的技巧自行更新模型以退出当前的更新循环，但这并不正确......

【问题讨论】：

使用反应形式angular.io/guide/reactive-forms
stackblitz.com/angular/qdjovykmmlx

标签： angular angular2-forms

【解决方案1】：

您可以通过自定义的双向绑定ngModel 以模板驱动的方式轻松实现这一点：

<label for="food">Food
<input name="food" type="checkbox" [ngModel]="cheese && salami" (ngModelChange)="food=$event" />
<label for="cheese">cheese
<input name="cheese" type="checkbox" [ngModel]="food" (ngModelChange)="cheese=$event" />
<label for="salami">salami
<input name="salami" type="checkbox" [ngModel]="food" (ngModelChange)="salami=$event" />

DEMO

【讨论】：