如何将表单控件值作为对象并在输入字段中呈现其标签？

Question

我有简单的表单，其中有带有自动完成功能的输入字段（角度材质组件）。问题是，当我从自动完成框中选择值时，输入字段会出现[Object object]为值，而我希望它是某种与评估器相关的文本。是否可以开箱即用，或者我必须直接操作 DOM 元素才能实现这一点？

该字段的值Host故意是一个对象。

形式：

<form [formGroup]="form" class="full-width">
  <mat-form-field>
    <mat-label>Host</mat-label>
    <input type="text" matInput formControlName="host" [matAutocomplete]="hostSuggestionsAutocomplete"
           placeholder="Host"/>
  </mat-form-field>
  <mat-form-field>
    <input matInput formControlName="delay" placeholder="Delay" type="number" min="1" max="3600"/>
    <mat-error>Delay must be between 1 and 3600 seconds</mat-error>
  </mat-form-field>
</form>

<mat-autocomplete #hostSuggestionsAutocomplete=matAutocomplete>
  <mat-option *ngFor="let hostSuggestion of hostSuggestions"
              [value]="hostSuggestion">{{hostSuggestion.toViewLabel()}} #{{hostSuggestion.id}}</mat-option>
</mat-autocomplete>

主持人：

export class Host {
  id: number;
  address: String;
  label: String;
  status: HostStatus;
  lastStatusUpdate: Date;
}
Result af

从自动完成中选择：

相反，[Object object]我希望它是让我们说value.id + value.address或类似的东西 - 一般来说，自定义标签。

在 AngularDart 中，有一个选项可以指定重新渲染的项目 - 一个接受值并为其生成在输入字段中呈现的“标签”的函数。

Answer 1

一如既往，我知道有一个解决方案，但我忘记了它是什么，因为我没有仔细阅读文档。我需要的是[displayWith]的属性MatAutocomplete。这与 Angular dart 组件中渲染的 item 完全相同。

https://material.angular.io/components/autocomplete/overview#setting-separate-control-and-display-values