如何在angular中使用json文件更改条件下的p-下拉列表值

Question

我的网站使用三种语言:

英语

sindh省
阿拉伯语

我正在使用PrimeNG下拉菜单选择语言，并希望根据用户选择阿拉伯语，信德语或英语更改下拉菜单的值。默认语言为英语。

问题是如何在点击共同响应语言时改变p-下拉值。

languages.json:

{
"english": [

{
"name": "English",
"mod": "mod3"
},
{
"name": "Sindhi",
"mod": "mod1"
},
{
"name": "Arabic",
"mod": "mod2"
}
],
"arabic": [

{
"name": "إنجليزي",
"mod": "mod3"
},
{
"name": "سنڌي",
"mod": "mod1"
},
{
"name": "عربي",
"mod": "mod2"
}
],
"sindhi": [

{
"name": "انگريزي",
"mod": "mod3"
},
{
"name": "سنڌي",
"mod": "mod1"
},
{
"name": "عربي",
"mod": "mod2"
}
]
}

app.component.ts我从这个答案中得到了什么

ngOnInit() {
this.httpClient.get<any>('../assets/data/languages.json')
.toPromise()


.then((res: any) => {
this.languages = res.english;
localStorage.setItem('selectedLanguage', JSON.stringify(this.languages[0]));
if(this.selectedLanguage.name === "Arabic"){
this.languages = res.arabic;
localStorage.setItem('selectedLanguage', JSON.stringify(this.languages[1]));
}
else if(this.selectedLanguage.name === "Sindhi"){
this.languages = res.sindhi;
localStorage.setItem('selectedLanguage', JSON.stringify(this.languages[2]));
}                

});
this.selectedLanguage = JSON.parse(localStorage.getItem("selectedLanguage")!);
}

app.component.html

<p-dropdown [options]="languages" [(ngModel)]="selectedLanguage" optionLabel="name"
(onChange)="changeLanguage(selectedLanguage)"></p-dropdown>

Answer 1

在prime ng中，您需要自己跟踪选定的值并在其他lang数组中找到它。这里有一个例子:Stackblitz