无法在角度材料自动完成中从 [displayWith] 调用另一个方法答案

【问题标题】：unable to call another method from [displayWith] in angular material autocomplete无法在角度材料自动完成中从 [displayWith] 调用另一个方法
【发布时间】：2020-05-05 22:31:33
【问题描述】：

我有一个地址对象，我将其转换为字符串以在自动完成中显示完整的地址。这是代码。

address.component.html

<mat-form-field class="address-autocomplete">
  <input type="text" placeholder="Legal Address" aria-label="legal address" matInput [formControl]="legalAddress"
    [matAutocomplete]="lglAddress">
  <mat-error *ngIf="legalAddress.invalid">{{ getErrorMessage() }}</mat-error>
  <mat-autocomplete #lglAddress="matAutocomplete" [displayWith]="displayFullAddress">
    <mat-option *ngFor="let address of legalAddresses | async" [value]="address">
      {{ address | addressToString }}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

address.component.ts

displayFullAddress(address: Address): string {
  return address ? this._addressService.toString(address) : '';
}

address.service.ts

public toString(address: Address): string {
  const addr1 = address.addressLine1 ? address.addressLine1 + ', ' : '';
  const addr2 = address.addressLine2 ? address.addressLine2 + ', ' : '';
  const addr3 = address.addressLine3 ? address.addressLine3 + ', ' : '';
  const addr4 = address.addressLine4 ? address.addressLine4 + ', ' : '';
  const city = address.addressCity ? address.addressCity + ', ' : '';
  const state = address.addressState ? address.addressState + ', ' : '';
  const postalCode = address.addressPostalCode
    ? address.addressPostalCode + ', '
    : '';
  const country = address.addressCountry ? address.addressCountry : '';

  return `${addr1} ${addr2} ${addr3} ${addr4} ${city} ${state} ${postalCode} ${country}`;
}

我收到以下错误：

ERROR 错误：未捕获（承诺中）：TypeError：无法读取属性未定义类型错误的“toString”：无法读取属性“toString”的不明确的在 MatAutocomplete.displayFullAddress [as displayWith] (main.513c5e2c3c86f0d47f91.js:168958) 在 MatAutocompleteTrigger._setTriggerValue (main.513c5e2c3c86f0d47f91.js:84813)

如果我不从addressService 调用toString 方法，而是在displayFullAddress 方法中实现整个逻辑，它可以正常工作。我不能在displayWith 中调用任何其他方法吗？

【问题讨论】：

标签： javascript angular autocomplete angular-material angular8

【解决方案1】：

发现在这种情况下this 绑定到mat-autocomplete，这就是它失败的原因。可以这样做：

displayFullAddress = (address: Address): string => {
  return address ? this._address.toString(address) : null;
}

这里，this 绑定到组件，注入的_address 服务工作。

PS：更好的解释是provided here

【讨论】：