Question

我正在使用我的组件中的textarea，但我的ngModelChange似乎无法正常工作。

<textarea [ngModel]="something?.commentaire" (ngModelChange)="something.commentaire">{{something.commentaire}}

但是当我更改文本区域中something的评论时，{{something.commentaire}}不会更改。

任何想法我怎么能解决它？

这个问题与two way binding with elvis-operator不同，因为我的问题不是关于elvis运算符以及如何使用它。而是与方式相关，标签textarea处理事件的变化。

Answer 1

使用ngModelChange绑定属性时，您希望获取$event数据并对其执行操作。

(ngModelChange)="doSomething($event)"

上面，$event变量是从textarea发出的变化。

component.ts

    doSomething($event) {

        // Do something with $event, you could for example,
        // convert it to an URL format
        // Imaginery function: "My name is Jeff" => "my-name-is-jeff"
        const uri = makeUri($event)

        // Now you have to set it to the variable you want it to 
        // bind to, so the model gets updated with the new value
        this.something.commentaire = uri
    }

如果您不需要对数据执行任何操作并且只想将其绑定到变量，则可以使用“框中的香蕉”语法：

[(ngModel)]="something.commentaire"

请注意，您无法使用elvis operator等待数据加载，否则会破坏模型绑定

[(ngModel)]="something?.commentaire" // Not working!

在幕后，这种语法实际上正在取代：

[ngModel]="something.commentaire" (ngModelChange)="something.commentaire = $event"

Answer 2

您可以在ngModel中使用“框中语法香蕉”：

<textarea [(ngModel)]="something.commentaire">{{something.commentaire}}

这是一种在引擎盖下使用ngModelChange的快捷方式。

但它不适用于elvis运算符，因此您可以利用$event中的ngModelChange：

<textarea [ngModel]="something?.commentaire" (ngModelChange)="something?.commentaire ? something.commentaire=$event:null">{{something.commentaire}}

Answer 3

根据您的需要使用[ngModel]和(ngModelChange)绝对正确。您唯一需要做的就是在(ngModelChange)上调用一个函数。存储在变量$event中的角度（模型更改后）发出的事件应传递给该函数。在您的情况下，发出的事件类型为string，您可以从方法something.commentaire

将其分配给变量OnChange().

<textarea [ngModel]="something?.commentaire" (ngModelChange)="OnChange($event)">{{something.commentaire}}

OnChange(event : string){
   this.something.commentaire = event;
}

使用ngModelChange angular未检测到textarea更改

3 个答案: