用户从语言栏中以角度更改语言时如何更改下拉列表值

问题描述

我在数据库中有一个两列的表 1.英文名 2.波斯语名称 我通过Web API返回这两列，并在我的角度项目中使用它

在角度项目中，我使用两种语言的ngx-translate 1.英语 2.波斯语

现在，当用户从语言栏中选择一种语言时，我想动态地将数据加载到下拉列表中。 例如 当用户使用英语时，下拉值应从api获取我的EnglishName列数据 并且当用户选择“波斯语”时，下拉值应从api获取我的PersianName列数据。

app.component.ts：

import { navItemsDari } from '../../_nav';
import { TranslateService } from '@ngx-translate/core';
import { Router } from '@angular/router';
@Component({
  
  selector: 'app-dashboard,',templateUrl: './default-layout.component.html',})
export class DefaultLayoutComponent {
  //public sidebarMinimized = false;
  public navItems = navItems;
  langChanged:boolean;
    
  ngOnInit(): void {
    this.switchLang('English')
  }

  constructor(public _router: Router,public translate: TranslateService) {
    
    translate.addLangs(['English','دری']);
    translate.setDefaultLang('English');
  }
  switchLang(lang: string) {
    this.translate.use(lang).sunscribe((res)=>{
this.langChanged=true;
});
   
  }
  onlogout() {
    localStorage.removeItem('token');
    this._router.navigate(['/login']);
  }
  // toggleMinimize(e) {
  //   this.sidebarMinimized = e;
  // }
}

app.component.html

<span class="form-inline" id="language">
    <select class="form-control" #selectedLang (change)="switchLang(selectedLang.value)">
      <option *ngFor="let language of translate.getLangs()" [value]="language"
        [selected]="language === translate.currentLang">
        {{ language }}
      </option>
    </select>
  </span>

child.component.ts：

export class SubCategoryComponent implements OnInit {
  public showHideName:boolean = false;
  currentLang:boolean;
 constructor(private service: AdminServiceService,private toastr: ToastrService,private translate:TranslateService) {  
 
  }

ngOnInit(): void {
if(this.langChanged){
 if(this.translate.currentLang==='persian'){
  this.showHideName=true;
 }
 else if(this.translate.currentLang==='English'){
    this.showHideName=false;
 } 
}
}

子component.html

<div class="form-group" *ngIf="showHideName">
            <div class="form-group">
                <label>Select Main Category</label>
                <select   name="name"  #name="ngModel" [(ngModel)]="service.formData.name" class="form-control"    style="font-weight:bold;" >         
                    <option *ngFor="let pd of list" value="{{pd.id}}" >{{pd.name}}</option>
                  </select>
              </div>
          </div>
<SubCategoryComponent [langChanged]="langChanged"></SubCategoryComponent>

我想通过更改语言来显示和隐藏div 如果用户从语言栏中选择英语，则div应该隐藏 并且如果用户从语言栏中选择波斯语，则div应该自动显示

你能帮我吗朋友 谢谢

解决方法

app.component.html

<div>
  <h2>{{ 'HOME.TITLE' | translate }}</h2>
  <label>
    {{ 'HOME.SELECT' | translate }}
    <select #langSelect (change)="translate.use(langSelect.value)">
      <option *ngFor="let lang of translate.getLangs()" [value]="lang" [selected]="changeLang(lang)">{{ lang }}</option>
    </select>
  </label>
</div>

app.component.ts：

//调用您的api并将值更新为lang

changeLang（lang）{

lang === this.translate.currentLang;

}

ref：https://stackblitz.com/edit/ngx-translate-example-nqx7wv注释掉您的查询，如果有帮助的话。如果可以解决您的问题，请考虑接受答案。

,

translate.use是可观察的，因此您需要对其进行订阅，然后在完成时将一些标志更改为语言已更改的子组件，然后执行您的逻辑。

switchLang(lang: string) {
    this.translate.use(lang).subscribe((res)=>{
        this.langChanged = true;
    });
  }

使用langChanged作为子组件的输入

<SubCategoryComponent [langChanged]="langChanged"></SubCategoryComponent>

child.component.ts：

@Input() langChanged: boolean;

ngOnChanges(): void {
           if(langChanged){
              if(this.translate.currentLang === 'Persian'){
                 this.showHideName=true;
              }
           else if(this.translate.currentLang === 'English'){
               this.showHideName=false;
           }
        }
     }

app。零件。 ts

langChanged:boolean;