Angular 2 textarea 不接受来自 JQuery 的值

Question

我有一个具有输入文本区域字段的 Angular 2 应用程序：

<textarea id="projectDescription" required [(ngModel)]="projectDescription" [formControl]="createNewForm.controls['projectDescription']" style="margin-bottom:-2%;width:50%;"></textarea>

我们还有一个使用 Selenium 测试框架进行自动化测试的测试团队。他们正在尝试向 textarea 中注入一个值以使用

提交表单

$("#projectDescription").val("Test value");

但是，textarea 的文本没有得到更新（我们还使用了其他添加文本的迭代，即 text()、innerHTML = ）。它适用于其他输入类型，例如“文本”，只有文本区域没有更新。这是一个已知问题吗？有解决办法吗？

编辑：我还应该注意，我什至无法更新站点上本地控制台中的值。但是当我删除 Angular 2 特定属性（即 ng-object ng-class）时，我能够更新值，因此 Angular 框架和 JQuery 之间的交互发生了一些事情。

Answer 1

请不要在使用 Angular 时使用 JQuery。可能在某些用例中您可能需要使用 JQuery，但如果真的发生的话，这些情况将非常罕见。相反，在 html 标记上放置一个本地元素 ref，如下所示（#projectDescription）：

<textarea #projectDescription id="projectDescription" required [(ngModel)]="projectDescription" [formControl]="createNewForm.controls['projectDescription']" style="margin-bottom:-2%;width:50%;"></textarea>

在您的 ts 中，使用 @ViewChild 获取 ElementRef，如下所示：

@ViewChild('projectDescription') projectDescription: ElementRef;

确保从@angular/core 导入ViewChild 和ElementRef。

并使用以下方法操作文本区域的值：

this.projectDescription.nativeElement.value = "Whatever you want the value to be";

您还可以console.log(this.projectDescription) 来查看您可以操作的本机元素中的其他内容。