Угловое отображение материала с ngx-translate не работает - PullRequest
Новая
       31

Угловое отображение материала с ngx-translate не работает

3 голосов
/ 07 марта 2019

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

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

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

<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>

Мой дисплей с функцией ниже: 

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. Так что подписка производится после того, как я получу свой параметр для перевода, поэтому после моего возвращения Мне нужен какой-то трюк или совет, чтобы передать переведенную строку в качестве возврата.

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

Ответы [ 2 ]

1 голос
/ 07 марта 2019

Наблюдаемые в большинстве случаев асинхронные функции. В зависимости от вашей реализации вы можете использовать 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
    : '';

}

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

EDIT: 

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"
0 голосов
/ 08 марта 2019

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

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

Условие должно быть выполнено, когда перевод сделан, поэтому я должен был сделать это в ngOnInit: 

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

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

...