Блог

Я использую директиву [displayWith] в моем mat-автозаполнении. Он отлично работает, когда я вручную выбираю значения, но когда я перезагружаю страницу, я не получаю перевод. Параметр, необходимый для перевода, асинхронно загружается из параметров запроса в ngOnInit. Поэтому я полагаюсь на параметр async, но моя displayFunction () — это функция синхронизации. Как это решить?

Без функции [displayWith] все работает нормально, но без перевода (это просто отображение чистых значений, чего я не хочу). Поэтому я уверен, что остальная часть кода правильная.

Мой mat-автозаполнение:

 <mat-form-field [formGroup]="cityForm"
                appearance="outline"
                floatLabel="never"
                color="primary">
  <mat-icon matPrefix>location_on</mat-icon>
  <input type="text" placeholder="{{ 'job_offer_search_bar.job-offer-search-bar-city-form.placeholder' | translate }}"
         aria-label="Number" matInput
         formControlName="cityControl" [matAutocomplete]="auto">
  <mat-autocomplete #auto="matAutocomplete" (optionSelected)="onSelectionChanged($event.option.value)"
                    [displayWith]="displayFn.bind(this)">
    <mat-option>
      {{ 'job_offer_search_bar.job-offer-search-bar-city-form.all' | translate }}
    </mat-option>
    <mat-option *ngFor="let city of filtredCities | async" [value]="city">
      {{ 'job_offer_search_bar.job-offer-search-bar-city-form.city' | translate:"{ city: '"   city  "' }"}}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>
  

Моя функция displayWith приведена ниже:

 displayFn(val: string){
    if (!val) return '';
    let stringToReturn;
    this.translate.get('job_offer_search_bar.job-offer-search-bar-city-form.city', {city: val}).subscribe(value => {
      console.log('inside subscribe', value);
      stringToReturn = value;
    });
    console.log('after sub', stringToReturn);
    if (stringToReturn != undefined) {
      return stringToReturn;
    } else {
      return 'Sorry, value has not been translated';
    }
  

Console.log in subscribe вызывается после console.log after subscribe . Итак, подписка выполняется после того, как я получу свой параметр для перевода, то есть после моего возвращения…
Мне нужен какой-нибудь трюк или подсказка, чтобы передать мою переведенную строку в качестве возврата.

Я предполагаю, что есть способ сделать это. Любая помощь будет принята с благодарностью.

Наблюдаемые объекты в большинстве случаев являются асинхронными функциями. В зависимости от вашей реализации вы можете использовать translate.instant

 displayFn(val: string) {

  const defaultMessage = 'Sorry, value has not been translated';
  return val
    ? this.translate.instant('job_offer_search_bar.job-offer-search-bar-city-form.city', { city: val }) || defaultMessage
    : '';

}
  

Если функция instant вызывается до загрузки файла перевода, она вернет значение undefined.

Редактировать:

 displayFn(val: string) {

  const translate$ = this.translate.get('job_offer_search_bar.job-offer-search-bar-city-form.city', { city: val }).pipe(
    map(translatedText => translatedText || 'Sorry, value has not been translated')
  )

  return val
    ? translate$
    : of('');

}


[displayWith]="displayFn.bind(this) | async"
  

Решение проблемы было сложным. Мне пришлось использовать * ngIf в mat-form-field, чтобы дождаться моей переведенной метки:

 <mat-form-field *ngIf="isReady$ | async" [formGroup]="cityForm"
  

При выполнении перевода должно быть выполнено условие, поэтому мне пришлось сделать это в ngOnInit:

  this.isReady$ = this.translate.get('translate_id').pipe(mapTo(true));
  

Таким образом, теперь элемент не отображается до того, как перевод будет возвращен из службы translate. Это обходной путь, но я не нашел другого решения.

Если вы используете changeDetection: ChangeDetectionStrategy.OnPush стратегию

вы можете добавить AfterViewChecked инструменты в свой компонент и

на ngAfterViewChecked крючке добавьте следующий код:

 ngAfterViewChecked() {
   this._translateService.onLangChange.subscribe(() => {
       this._changeDetectorRef.detectChanges()
   });
}
  

При таком подходе вам не нужно что-то делать в шаблоне.

У меня это работает. Наслаждайтесь.