如何在Angular 10中使用ngx-translate来转换ng-select下拉值

Question

如果用户更改了不同的语言，我需要翻译下拉值。

我知道一种使用管道和转换异步行为的解决方案，但我想我们是否有更好的解决方案。

下面是解决方案的代码。

translate-options.pipe.ts
@Pipe({
name: 'translateOptions',
})
export class TranslateOptionsPipe implements PipeTransform, OnDestroy {
constructor(private translateService: TranslateService) { }

transform(items: any) {    
const observable = Observable.create(observer => {
this.translateService.get(items).subscribe(result => {            
// result will be an object
// e.g. { 'JOBS.UX': 'UX Designer', 'JOBS.DEVELOPER': 'Developer' }
observer.next(result);
});        
this.translateService.onLangChange.subscribe(event => {
this.translateService.get(items).subscribe(result => {            
observer.next(result);
});
})
});
return observable;
}
ngOnDestroy() {
this.translateService.onLangChange.unsubscribe();
}
}

app.component.html
<ng-select
[addTag]="true"
[addTagText]="to.addTagText || 'Create item: '"
[multiple]="to.multiple"
[closeOnSelect]="!to.multiple"
(change)="onAutoCompleteChange($event)"  
>
<ng-option
*ngFor="let item of items | translateOptions | async | keyvalue" 
[value]="item.key"
>
{{ item.value }}
</ng-option>
</ng-select>

Answer 1

您可以将[(项(]输入API添加到ng选择并使用选项和标签的自定义模板

<ng-select
[(items)]="items"
[addTag]="true"
[addTagText]="to.addTagText || 'Create item: '"
[multiple]="to.multiple"
[closeOnSelect]="!to.multiple"
(change)="onAutoCompleteChange($event)"  
>
<<ng-template ng-option-tmp  ng-label-tmp let-item="item">
{{item | translate}} 
</ng-template>  
</ng-select>