невозможно вызвать другой метод из [displayWith] в angular автозаполнение материала

Question

У меня есть объект адреса, который я преобразовываю в строку для отображения полного адреса в автозаполнении. Вот код.

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}`;
}

Я получаю следующую ошибку:

ОШИБКА: Uncaught (в обещании): TypeError: Cannot читать свойство 'toString' из неопределенного TypeError: Невозможно прочитать свойство 'toString' из неопределенного в MatAutocomplete.displayFullAddress [as displayWith] (main.513c5e2c3c86f0d47f91. js: 168958) в MatAutocompleteTrigger._sete0.813f5 (1363) .e0.83: 013.8f5 (1364). )

Если я не вызываю метод toString из addressService и вместо этого реализую всю логику c в методе displayFullAddress, он работает нормально. Могу ли я не вызывать какой-либо другой метод в пределах displayWith?

Answer 1

Выяснил, что this в этом контексте связан с mat-autocomplete, поэтому он терпит неудачу. Это можно сделать так:

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

Здесь this привязан к компоненту, и внедренный сервис _address работает.

PS: лучшее объяснение этому: предоставлено здесь