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

Question

我需要根据从我的理解的两种方式绑定的帮助下根据语言选择的语言来更新语言字段。请帮助我如何在Angular中实现这一目标，

这是相同的

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

screenshot

Answer 1

我做了一个简单的 stackblitz 正在寻找。

基本上，您将选择绑定到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>

您还可以编写一些 selectLanguage 函数以通过按钮设置它，

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

  selectedLanguage: string = 'en';

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

然后完成，单击任何按钮时，您的选择将被更新