Question

目标：为下拉菜单设置默认值，该更改会更改用户位于/ en /或/ es /（英语或西班牙语）上的网站的地址

问题：在查阅了文档以及我能找到的所有SO文章（例如Angular 2 Dropdown Options Default Value）之后，所有变化似乎都没有用。

怎么了？我需要表格/垫子表格吗？或者有更简单的方法吗？

我尝试过的事情：以下是我在HTML和TypeScript中尝试过的一些变化：

<mat-select (selectionChange)="doSomething($event)" [value]="language"> 
<mat-select (selectionChange)="doSomething($event)" [value]="English">  
<mat-select (selectionChange)="doSomething($event)" [(ngModel)]='defaultLanguage'>

HTML ：

<form [formGroup]="_siteForm">
      <mat-form-field class="right">
          <mat-select (selectionChange)="doSomething($event)" [(ngModel)]='defaultLanguage'>
              <mat-option *ngFor="let language of languages" [value]="language">
                  {{language.viewValue}}
              </mat-option>
          </mat-select>
      </mat-form-field>
</form>

TypeScript ：

public _siteForm             : FormGroup;
this._siteForm = fb.group({
            'languages' : ['']
        });
public languages = [
  { value: "en", viewValue: 'English' },
  { value: "es", viewValue: 'Spanish' }
   ];

public defaultLanguage          : string = "English";

if (this.localeId == "en") { this._siteForm.controls["languages"].setValue(this.languages.filter(item => item.value === 'en')[0].viewValue); }
else { this._siteForm.controls["languages"].setValue(this.languages.filter(item => item.value === 'es')[0].viewValue); }

备用

this._siteForm.setValue({ languages: "en" });

Answer 1

原因可能是您设置为默认值的值类型以及要遍历的对象的类型。

此处的类型为string

<mat-select (selectionChange)="doSomething($event)" [value]="language"> 
<mat-select (selectionChange)="doSomething($event)" [value]="English">

但这是JSON对象：

<mat-option *ngFor="let language of languages" [value]="language">
     {{language.viewValue}}
</mat-option>

将两种类型都设为JSON对象或两个字符串。

如果使用[value]="languages[0]"，它将使用languages数组的第一个元素设置默认值。

https://github.com/angular/components/issues/7771#issuecomment-336482394

Answer 2

尝试一下：

public languages = [
  { value: "en", viewValue: 'English' },
  { value: "es", viewValue: 'Spanish' }
   ];

public defaultLanguage = languages[0]; // or languages[1]

我立即注意到您正在尝试使ngModel（一个字符串）与您的[value]（一个对象

）相匹配

<mat-select (selectionChange)="doSomething($event)" [(ngModel)]='defaultLanguage'>
     <mat-option *ngFor="let language of languages" [value]="language">
          {{language.viewValue}}
     </mat-option>
</mat-select>

Answer 3

您可能想要使用以下内容：

<mat-option *ngFor="let language of languages" [value]="language.value">
    {{language.viewValue}}
</mat-option>

然后将默认语言设置为以下值之一：

public defaultLanguage: String = "en";

通过这种方式，这些选项是简单的字符串而不是JSON，从而使它们易于比较。当前，您的defaultLanguage变量与这两个选项都不匹配。

角度-设置下拉菜单的默认值-解决方案不起作用？

3 个答案: