Question

我试图找出进行变更检测的最佳方法。我有这样的HTML：

<tr *ngFor="let element of elements">
    <td>
        <input type="checkbox" [(ngModel)]="element.checked">
    </td>
    <td>
        <select [(ngModel)]="element.tag" (change)="tagChanged(element)" [disabled]="!element.checked">

当我取消选中输入字段时，我想强制element.tag值为某个值。我应该像(change)那样在input上执行select属性，还是有更好的方法？我绑定ngModel这一事实让我想知道我是否做得最好。

Answer 1

(change)事件绑定到输入更改事件，这意味着即使您没有绑定到输入的模型，也可以使用此事件。

Angular 5提供了第二个更改事件（从Angular2开始提供）。这是(ngModelChange)事件。它是@Output指令的ngModel。它在模型更改时触发，并且在没有ngModel的情况下无法使用，并用于侦听对其所在元素上ngModel绑定的内容的更改。

你可以做这样的事情

<input type="checkbox" [ngModel]="element.checked"  (ngModelChange)="checkboxChanged($event)">

checkboxChanged(newValue) {
    //update element.tag based on new value
    //Since there is no two way binding...
    //Don't forget to update element.checked= newValue
}

(ngModelChange)事件用于侦听对其所在元素ngModel绑定的内容的更改。如果你想对你的绑定做一些操作，比如将字符串设置为大写等，这很有用。

<input [ngModel]="model.property"(ngModelChange)="modifyModelProperty($event)">

所以，

<input [ngModel]="model.property" (ngModelChange)="model.property=$event">

相当于：

<input [(ngModel)]="model.property">

感谢@Sam Herrmann发布文档链接您可以在官方文档here中阅读有关此主题的更多信息。

在您的方案中使用(change)事件，因为您对复选框状态的更改感兴趣，从而影响模型中的其他内容。但是，由于element.checked是boolean，而不是[(ngModel)]使用[checked]="element.checked"（双向绑定的工作方式比单一方式中的单向绑定慢一点）。）

<input type="checkbox" [checked]="element.checked" (change)="reactToChange()" />

Answer 2

您可以绑定{@ 1}}和[checked]，如@Azzi指出的那样，但您可能想要使用的是(change)和[ngModel]。 ngModel旨在隐藏您需要为不同类型的表单控件绑定的属性和事件的详细信息。复选框的属性和事件分别为(ngModelChange)和checked，文本输入分别为change和value。另一方面，input和ngModel适用于所有输入。您可以在官方文档here中阅读有关此主题的更多信息。

Angular 5对变量采取行动

2 个答案: