尽管使用 displayWith 属性，但材料自动完成输入显示显示 [Object object]答案

【问题标题】：Material Autocomplete Input showing displaying [Object object] despite using displayWith property尽管使用 displayWith 属性，但材料自动完成输入显示显示 [Object object]
【发布时间】：2020-08-19 15:25:19
【问题描述】：

我正在使用带有 mat-autocomplete 的输入来选择对象列表选项（它们具有 ID、姓名、姓氏等）。我需要 formControl 的值是所有对象，而不仅仅是名称，所以我可以显示名称 + 姓氏，然后将 ID 用于其他内容。我在搜索输入并选择一个选项时没有问题，它会按我想要的方式显示，我可以保存整个选定的对象。

问题：当我想通过代码设置值时 - 我使用相同的表单进行创建和编辑，所以有时我必须将控件的值设置为当前值。但是当我这样做时，它显示为 [Object object]，我不知道为什么，或者是否可以做我想做的事？

我的模板中有这段代码：

<input matInput type="text" formControlName="padre" placeholder="Ingrese el {{rolPadre}} asociado" [matAutocomplete]="auto" required />
<mat-autocomplete #auto [displayWith]="displayPadre">
  <mat-option *ngFor="let padre of possiblePadres | async" [value]="padre">
    {{padre.nombre}} {{padre.apellido}}
  </mat-option>
</mat-autocomplete>

这是显示Fn：

displayPadre(padre: Usuario): string {
  return padre ? `${padre.nombre} ${padre.apellido}` : undefined;
}

当我想做这样的事情时，问题就会发生：

this.padre.setValue(exampleObject);

任何帮助都会很棒！谢谢！

【问题讨论】：

你想在选项中显示什么？只有名称还是所有值？
目前，当您选择一个时，我在可能的选项和输入中都显示了两个属性（姓名+姓氏），但将所有对象保存在 formControl 值中。如果我以编程方式设置控件的值，它会显示 [Object object] 而不是 name + surname，就像在显示函数中一样
您的表单控件只包含一项？它应该容纳更多吗？我问这个是因为您使用的是mat-autocomplete，并且通常在您必须在表单控件中保存多个项目时使用该组件
@BogdanChereghi 在选择名为“padre”的项目时，我使用 mat-autocomplete 来显示可能的选项。我有一个可能的选项列表然后当然，当您选择时，表单控件值只是一个。当我编辑现有用户而不是创建一个用户时，会填写完整的表单，我想在该输入中显示当前值，但可以将其更改为另一个可能的选项。
@JoséMedrano 好吧，如果您只选择一个，为什么不使用 mat-select 呢？如果要实现mat-select，则需要将compareWith 函数提供给mat-select。你可以在这里阅读更多内容material.angular.io/components/select/api。如果您需要帮助，请告诉我，我会发布答案。

标签： html angular typescript angular-material

【解决方案1】：

问题可能在于您设置输入值的方式。你的输入是这样的：

<input formControlName="padre">

而您正在尝试通过以下方式设置价值：

this.padre.setValue({});

但是如果你有一个像this.padre 这样的表单控制器，那么你应该像这样绑定它：

<input [formControl]="padre">

而不是使用formControlName="padre"。

Run it on stackblitz

【讨论】：

@JoséMedrano 没问题，编码愉快 :)