無法從 angular 材料自動完成中的 [displayWith] 調用另一個方法

Question

我有一個地址 object ，我將其轉換為字符串以在自動完成中顯示完整的地址。 這是代碼。

地址.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>

地址.component.ts

displayFullAddress(address: Address): string {
  return address ? this._addressService.toString(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}`;
}

我收到以下錯誤：

錯誤錯誤：未捕獲（承諾中）：TypeError：無法讀取未定義的屬性“toString”類型錯誤：無法讀取 MatAutocompleteTrigger.displayFullAddress [as displayWith] 處未定義的屬性“toString”（main.513c5e2c3c86f0d47f91.js:168958）在 MatAutocompleteTrigger._setTriggerValue （main.513c5e2c3c86f0d47f91.js:84813）

如果我不從addressService調用toString方法，而是在displayFullAddress方法中實現整個邏輯，它就可以正常工作。 我不能在displayWith中調用任何其他方法嗎？

Answer 1

發現在這種情況下this綁定到mat-autocomplete ，這就是它失敗的原因。 可以這樣做：

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

在這里， this綁定到組件並且注入的_address服務工作。

PS： 這里提供了一個更好的解釋