【问题标题】：how to bind value to angular material Auto Complete in angular 7如何在角度7中将值绑定到角度材料自动完成
【发布时间】：2020-10-26 14:08:39
【问题描述】：

您好，我在我的 angualr7 应用程序中使用角度材料自动完成组件，并且正在研究如何将 api 响应中的值绑定到它。任何人都可以提供解决此问题的解决方案吗？

HTML：

<mat-form-field>
    <input type="text" [(ngModel)]="templateId" name="templateId" #templateId="ngModel" placeholder="Template" matInput
        [matAutocomplete]="auto" aria-label="Number" (keyup)="filter($event)">
    <mat-autocomplete #auto="matAutocomplete" (optionSelected)="onTemplateChange($event)">
        <mat-option *ngFor="let temp of filtered" [value]="temp">
            {{temp.name}}
        </mat-option>
    </mat-autocomplete>
</mat-form-field>

Ts：

onTripTemplateChange($event) {
        this.templateId = $event.temp.name;
}

我需要在打开组件时默认选择值
当我从自动完成列表中更改选项时，我需要更改所选值

请告诉我灵魂..

【问题讨论】：

您应该阅读 excellent official docs 的 Angular Material 示例。
是的，已经完成了，但这些示例是响应式表单绑定，而不是模板驱动的表单..

标签： angular typescript angular-material angular7

【解决方案1】：

来自原始的角度材料自动完成文档。设置自动完成的值是可见的，您必须设置输入的值。

原始文档可在此处获得：https://v7.material.angular.io/components/autocomplete/overview

stackblitz 上也提供示例应用程序：https://stackblitz.com/angular/egaebogmkaa?file=src%2Fapp%2Fautocomplete-simple-example.ts

此示例应用程序仅显示基本的自动完成方案，但如果您在 .ts 中设置输入值，它将选择它。例如。

 myControl = new FormControl('One');

【讨论】：

模板驱动表单的任何示例？