ngModelChange角度未检测到textarea更改[重复]答案

【问题标题】：textarea change is not detected with ngModelChange angular [duplicate]ngModelChange角度未检测到textarea更改[重复]
【发布时间】：2017-06-02 10:38:53
【问题描述】：

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

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

但是当我在文本区域更改something的评论时，{{something.commentaire}}并没有改变。

知道怎么解决吗？

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

【问题讨论】：

我认为检查模板语法可能对您有用:) angular.io/docs/ts/latest/guide/template-syntax.html
@echonax 我认为这与您所指的略有不同。 OP 不知道 ngModelChange 正在通过 $event 变量发出更改。
@borislemke 即使那是真的，OP 也会通过查看链接了解这些知识:-)
我编辑了我的问题，以解释与@echonax 提供的链接相比有何不同
@edkeveked Günter 的回答能解决你的问题吗？

标签： angular

【解决方案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
    }

如果你不需要对数据做任何事情而只是想把它绑定到一个变量上，你可以使用“banana in a box”语法：

[(ngModel)]="something.commentaire"

注意不能使用elvis operator等待数据加载，否则会破坏模型绑定

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

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

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

【讨论】：

很好的答案，谢谢！

【解决方案2】：

ngModel 可以使用“banana in the box 语法”：

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

这是一个在后台使用ngModelChange 的快捷方式。

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

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

【讨论】：

我认为您不能将 elvis 运算符与双向绑定 AFAIR 一起使用：/
它不起作用。此语法在浏览器中引发错误
@echonax，谢谢，我不知道
@edkeveked，更新答案中的解决方案有效吗？
我已经支持@borislemke 的解决方案。实现我想要的更简单的方法是：<textarea [ngModel]="something?.commentaire" (ngModelChange)="something.commentaire = $event">{{something.commentaire}} </textarea>

【解决方案3】：

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

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

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

【讨论】：