有条件的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> 

形式 - 问题 - 无线是我的自定义表单控件（实现ControlValueAccessor）

我想传递价值到模型['q4_1']只有当第一个问题的答案有true值。如果回答第一个问题（model ['q4']）具有false,model ['q4_1']将会是null。

当我检查第一个问题的真实答案时，问题开始，之后检查第二个问题的一些答案，我再次检查第一个问题的错误anwer。我希望模型['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; 
    }, 
}