使用 Angular Material 以编程方式设置自动完成文本框文本答案

【问题标题】：Set autotcomplete textbox text programmatically with Angular Material使用 Angular Material 以编程方式设置自动完成文本框文本
【发布时间】：2019-02-09 16:21:12
【问题描述】：

我正在使用 Angular Material 创建表单。对于某些字段，用户应该获得自动完成功能。如果用户提供序列号，这些字段也应该从后端填充。

我的问题是，如何设置通过代码链接到自动完成的文本框的文本？

我复制了一个 StackBlitz 并对其进行了修改以匹配我的场景： https://stackblitz.com/edit/angular-material-autocomplete-async1-jxrahv?file=src%2Fapp%2Fapp.component.ts

如果你点击“点击我！”按钮，我希望文本框的文本更改为“Windstorm”（这不会发生）。

谢谢！

【问题讨论】：

好吧，您的实际表单控件值是一个对象，并且您尝试使用字符串设置该值，因此它不起作用。如果将其作为对象输入，它将起作用：stackblitz.com/edit/…
@AJT_82 是对的。一旦您将[matAutocomplete]="auto" 添加到输入 MatAutocompleteTrigger 值，访问器就会开始处理所有表单事件。 MatAutocompleteTrigger 使用 displayWith 方法写入输入值。 github.com/angular/material2/blob/…
违反规则，完全跑题：很高兴再次见到你@yurzui 好久不见。我希望一切都好！ :)
@AJT_82 是的，一切顺利，谢谢。你决定记住角形了吗？）
@yurzui 哈哈：D 是的！不过，我最新的激情是离子的。工作让我开始学习和开发 ionic，我喜欢它！ :)

标签： angular angular-material

【解决方案1】：

您正在为您的自动完成提供对象数组，因此当您尝试使用“仅”一个字符串来设置值时：

this.usersForm.get('userInput').setValue("Windstorm");

...它不会工作。将整个对象设置为值，你很好！ :)

this.usersForm.get('userInput').setValue({ id: 1, name: 'Windstorm' });

修改StackBlitz

【讨论】：

哈哈 :D 是的，很好！顺便说一句，很高兴我们解决了您的问题，周末愉快，编码愉快！ :)