Angular 5 对变量变化采取行动

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 值为某个值。我应该像 select 那样在 input 上做一个 (change) 属性还是有更好的方法？我绑定 ngModel 的事实让我想知道我是否以最好的方式做事。

Answer 1

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

Angular 5 提供了第二个更改事件（从 Angular2 开始可用）。那就是 (ngModelChange) 事件。它是 ngModel 指令的 @Output。它在模型发生变化时触发，如果没有 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">

Thanks to @Sam Herrmann for posting link to docs You can read more on this subject in the official docs here.

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

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

Answer 2

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

Angular 5 对变量变化采取行动

Angular 5 take action on variable change

angular

angular5