条件 ngModel 数据绑定

Question

我遇到了 Angular4 中 ngModel 的条件数据绑定问题。

解释一下：

我有一个小表格：

<form-question-radio
  [(ngModel)]="model['q4']"
  name="question"
  [options]="[{value:true, label:'Yes'}, {value:false,label:'No'}]"
  required>
      Do you want?
</form-question-radio>

<ng-container *ngIf="model['q4'] == true">
  <form-question-radio
    [(ngModel)]="model['q4_1']"
    name="question4_1"
    [options]="[
      {value:1,label:'Freedom'},
      {value:2,label:'Peace'},
      {value:3,label:'Money'}
    ]" required>
      What do you want?
  </form-question-radio>
</ng-container>

form-question-radio 是我的自定义表单控件（实现 ControlValueAccessor）

仅当第一个问题的答案具有 true 值时，我想将值传递给 model['q4_1']。如果第一个问题 (model['q4']) 的答案为 false，则 model['q4_1'] 将为 null。

当我检查第一个问题的正确答案时，问题就开始了，然后检查第二个问题的一些答案，然后我（再次）检查第一个问题的错误答案。我希望 model['q4_1'] 值等于 null，但不是。

---

我正在尝试使用条件绑定，例如：

[(ngModel)]="model['q4'] == true ? model['q4_1'] : null"

但它导致了错误。

---

我在尝试

[(ngModel)]="model['q4'] && model['q4_1']"

也是。但它仍然不起作用，因为我猜是返回布尔值。是吗？

---

问题： 有没有办法通过 ngModel 进行条件数据绑定？它应该是什么样子？

Answer 1

第一个解决方案：

使用 ngModelChange。这是一个默认情况下总是在输入值更改时将新值写入模型的事件，但它可以被覆盖。它将为每个使用 ngModel 的组件自动发出，因此您不必担心。

在模板中：

<form-question-radio
  [ngModel]="model['q4_1']"
  (ngModelChange)="questionQ4Change($event)">
</form-question-radio>
<form-question-radio
  [ngModel]="model['q4_1']"
  (ngModelChange)="questionQ41Change($event)">
</form-question-radio>

在控制器中：

questionQ4Change(newValue) {
  this.model['q4'] = newValue;
  if (!newValue) {
    this.model['q4_1'] = null;
  }
}
questionQ41Change(newValue) {
  this.model['q4_1'] = this.model['q4'] ? newValue : null;
}

---

第二种解决方案：

您还可以对 q4 和 q_1 使用 getter 和 setter。

在模板中：

<form-question-radio
  [(ngModel)]="model['q4_1']"
</form-question-radio>
<form-question-radio
  [(ngModel)]="model['q4_1']"
</form-question-radio>

在控制器中：

model = {
  q_4_value: null,
  q4_1_value: null,

  get q_4() { 
    return this.q_4_value;
  },
  get q4_1() {
    return this.q4_1;
  },

  set q_4(newValue) { 
    this.q_4_value = newValue;
    if (!newValue) {
      this.q4_1_value = null;
    }
  },
  set q4_1(newValue) {
    this.q4_1_value = this.q_4 ? newValue : null;
  },
}