角度材料 displayWith 不适用于 ngx-translate答案

【问题标题】：Angular material displayWith isn't working with ngx-translate角度材料 displayWith 不适用于 ngx-translate
【发布时间】：2019-07-29 05:36:27
【问题描述】：

我在我的垫子自动完成中使用 [displayWith] 指令。当我手动选择值时它工作正常，但是当我重新加载页面时我没有得到翻译。翻译所需的参数从 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>

我的 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 之后调用。所以订阅是在我得到我的翻译参数之后进行的，所以在我回来之后...... 我需要一些技巧或技巧来将翻译后的字符串作为返回值传递。

我认为有办法做到这一点。任何帮助将不胜感激。

【问题讨论】：

标签： javascript angular typescript rxjs ngx-translate

【解决方案1】：

在大多数情况下，Observable 是异步函数。根据您的实施，您可以使用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
    : '';

}

如果在翻译文件加载之前调用了即时函数，它将返回 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"

【讨论】：

我使用了translate.instant，但正如我所说，我需要异步加载的翻译参数:(所以translate.instant只给了我翻译ID...在这种情况下job_offer_search_bar.job-offer-search-bar-city-form.city
你的解决方案是返回一个空字符串''
试试我发布的这个新代码。请记住，将管道异步与函数一起使用既不将函数绑定到属性也不好。
不幸的是，我现在在控制台中收到 2 个错误：错误：InvalidPipeArgument: 'function () { [native code] }' for pipe 'AsyncPipe' and TypeError: Cannot read property 'dispose' of null .但一切编译正常
我明白了，很抱歉我的想法已经用完了=/

【解决方案2】：

问题的解决很棘手。我不得不在 mat-form-field 上使用 *ngIf 来等待我的翻译标签：

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

翻译完成后应该满足条件，所以我必须在 ngOnInit 中执行此操作：

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

所以现在元素在从翻译服务返回翻译之前没有显示。这是一种解决方法，但我还没有找到其他解决方案。

【讨论】：

【解决方案3】：

如果你使用changeDetection: ChangeDetectionStrategy.OnPush策略

您可以将AfterViewChecked 实现添加到您的组件中并

在ngAfterViewChecked钩子上，添加下一个代码：

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

在这种方法中，您无需在模板中做任何事情。

它对我有用。享受吧。

【讨论】：