我在mat-autocomplete中使用[displayWith]指令。当我手动选择值时,它工作正常,但是当我重新加载页面时,我没有得到翻译。转换所需的参数是从ngOnInit中的查询参数异步加载的。所以我依赖异步参数,但是我的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
。因此,在我获取翻译参数后进行订阅,因此在我返回之后...
我需要一些技巧或窍门,以将翻译后的字符串作为返回值传递。
我认为有办法做到这一点。任何帮助都会得到补偿。
答案 0 :(得分:1)
在大多数情况下,可观察到的是异步功能。
根据您的实现,您可以使用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"
答案 1 :(得分:0)
解决问题的方法很棘手。我必须在mat-form-field上使用* ngIf来等待我的翻译标签:
<mat-form-field *ngIf="isReady$ | async" [formGroup]="cityForm"
翻译完成后应该满足条件,所以我必须在ngOnInit中这样做:
this.isReady$ = this.translate.get('translate_id').pipe(mapTo(true));
因此,从翻译服务返回翻译之前,现在不会显示元素。这是一种解决方法,但我还没有找到其他解决方案。
答案 2 :(得分:0)
如果您使用 changeDetection: ChangeDetectionStrategy.OnPush
策略
您可以将 AfterViewChecked
工具添加到您的组件中,并且
在 ngAfterViewChecked
钩子上,添加下一个代码:
ngAfterViewChecked() {
this._translateService.onLangChange.subscribe(() => {
this._changeDetectorRef.detectChanges()
});
}
在这种方法中,您无需在模板中做任何事情。
它对我有用。享受。