如何根据使用 angular 选择的特定语言选项设置语言字段值

Question

我需要根据我的理解，在双向绑定的帮助下，根据从可用语言中选择的语言更新语言字段。请帮助我如何在 angular

中实现这一目标

这里是 Stackblitz link 同样

https://stackblitz.com/edit/angular-ivy-i4bnft?file=src/app/app.module.ts

Answer 1

我做了一个简单的 Stackblitz 你要找的东西。

基本上，您将 select 绑定到 ts 文件中的变量 selectedLanguage。

<div>
 <button *ngFor="let language of languages" (click)="selectLanguage(language)">{{language}}</button>
</div>

<select  [(ngModel)]="selectedLanguage">
  <option *ngFor="let language of languages" [value]="language">{{language}}</option>
</select>

你也写了一点select语言函数来通过按钮设置它

export class AppComponent  {
  languages: string[] = [
    'en', 
    'de',
    'fr',
  ];

  selectedLanguage: string = 'en';

  selectLanguage(language: string): void {
    this.selectedLanguage = language;
  }
}

大功告成，您的 select 将在单击任何按钮时更新