在角度材料 2 中的 md-select 中设置默认选项答案

【问题标题】：Set default option in md-select in angular material 2在角度材料 2 中的 md-select 中设置默认选项
【发布时间】：2017-05-10 05:38:09
【问题描述】：

我正在尝试在 angular-material2 的 md-select 中设置默认选项，但无济于事。

form2.component.ts：

export class Form2Component implements OnInit {
    frequency = [
                {"title" : "One Time",         "description" : "", "discount" : {"value" : 0,  "type" : "value"} },
                {"title" : "Weekly",           "description" : "", "discount" : {"value" : 20, "type" : "percent"} },
                {"title" : "Every other Week", "description" : "", "discount" : {"value" : 15, "type" : "percent"} },
                {"title" : "Monthly",          "description" : "", "discount" : {"value" : 10, "type" : "percent"} }
            ]
    constructor(){}
    ngOnInit(){}
}

form2.component.html：

<md-select placeholder="Frequency" [formControl]="userForm.controls['frequency']">
    <md-option *ngFor="let frequ of frequency" [value]="frequ" [selected]="frequ.title == 'Weekly'">{{frequ?.title}}</md-option>
</md-select>

【问题讨论】：

你使用什么样的表单...响应式/模板驱动？
我正在使用响应式表单。

标签： angular angular-material2

【解决方案1】：

由于您使用的是响应式表单，您可以将默认值设置为表单控件。所以你可以从数组中找到你想要的frequency，并将其设置为默认值，比如：

this.userForm = this.fb.group({
  frequency: this.frequency.find(x => x.title == 'Weekly')
})

并从您的模板中删除 selected：

<form [formGroup]="userForm">
  <md-select placeholder = "Frequency" formControlName="frequency" >
    <md-option  *ngFor="let frequ of frequency" [value]="frequ" > {{frequ?.title}} </md-option>
  </md-select>
<form>

Demo

【讨论】：

【解决方案2】：

组件 HTML

 <md-select placeholder="Favorite food" [(ngModel)]="selectedValue" name="food">
    <md-option *ngFor="let food of foods" [value]="food.value" >
      {{food.viewValue}}
    </md-option>
  </md-select>

  <p> Selected value: {{selectedValue}} </p>

组件.ts

@Component({
  selector: 'select-form-example',
  templateUrl: './select-form-example.html',
})
export class SelectFormExample {
  foods = [
    {value: 'steak-0', viewValue: 'Steak'},
    {value: 'pizza-1', viewValue: 'Pizza'},
    {value: 'tacos-2', viewValue: 'Tacos'}
  ];


   // setting this is the key to initial select.
   selectedValue: string = this.foods[0].value;

将选定的值设置为您希望它为默认值的数组中的值，您没有使用双向绑定

【讨论】：

它也不起作用。它将设置选择列表的值，但默认不显示选项。

【解决方案3】：

当您使用md-option value中的对象时，选项列表中默认值和对应选项的对象引用是不等于。

要解决此问题，您需要使用选项列表中的相应选项覆盖默认值在设置 FormGroup 之前。

这是一个例子：

my.component.ts

export class MyComponent implements OnInit {

    myobject: Object = {id:'1323', label:'myform', service: {id:'S01', label:'Service 01': desc:''}}
    services: Array<Service> = [
        {id:'S01', label:'Service 01' , desc:'Service desc'},
        {id:'S02', label:'Service 02' , desc:'Service desc'},
        {id:'S03', label:'Service 03' , desc:'Service desc'}];

    myForm : FormGroup;

    constructor(private fb: FormBuilder) {

        // Override the service in  myobject before setting the FormGroup myForm
        this.services.forEach(srv => {
            // Compare service By id
            if (srv.id === myobject.service.id) {
                myobject.service = srv;
            }
        });

        // Set the formGroup with the myobject containing the good reference to the services array.
        this.myForm = this.fb.group(myobject);
    }
}

my.component.html

<md-select class="carrier-select form-control" formControlName="service">
    <md-option class="carrier-option" *ngFor="let service of services" [value]="service">{{service.label}}</md-option>
</md-select>

【讨论】：