Angular 6 Material multiple set default value using form control

问题

I am using form control here is code for my html component

<mat-form-field>
  <mat-select placeholder="Toppings" [formControl]="toppings" multiple>
    <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping.value}}</mat-option>
  </mat-select>
</mat-form-field>

And my ts file is

export class SelectMultipleExample {
   toppings = new FormControl();
  toppingList: any[] = [
      { id:1,value:"test 1"},
      { id:2,value:"test 2"},
      { id:3,value:"test 4"},
      { id:4,value:"test 5"},
      { id:5,value:"test 6"},
      { id:6,value:"test 7"}
    ];

  

  constructor(){
    this.bindData();
  }

  bindData(){
    const anotherList:any[]=[
      { id:1,value:"test 1"},
      { id:2,value:"test 2"}
      ]

      this.toppings.setValue(anotherList)
  }
}

I want to set default value for mat select , any help how to achieve this will be great. I want to set multiple default value.

回答1:

The problem is due to the fact that your options are objects. In order for the selections to be applied, the selected objects must be the same objects as the ones used for the options. Revise your code as follows:

export class SelectMultipleExample {
    toppings = new FormControl();
    toppingList: any[] = [
        { id:1,value:"test 1"},
        { id:2,value:"test 2"},
        { id:3,value:"test 4"},
        { id:4,value:"test 5"},
        { id:5,value:"test 6"},
        { id:6,value:"test 7"}
    ];

    constructor(){
        this.bindData();
    }

    bindData() {
        const anotherList: any[] = [
            this.toppingList[0],
            this.toppingList[1]
        ]

        this.toppings.setValue(anotherList)
    }
}

回答2:

You may use compareWith attribute of mat-select. See that answer https://stackoverflow.com/a/57169425/1191125

回答3:

 <mat-form-field>
 <mat-label>Select Global Markets</mat-label>
 <mat-select [formControl]="globalmarketCategory" multiple >
 <mat-option *ngFor="let list of toppingList" [value]="list">{{list.value}}</mat-option>
 </mat-select>

export class SelectMultipleExample {
    globalmarketCategory= new FormControl();
    toppingList: any[] = [
                        { id:1,value:"test 1"},
                        { id:2,value:"test 2"},
                        { id:3,value:"test 4"},
                        { id:4,value:"test 5"},
                        { id:5,value:"test 6"},
                        { id:6,value:"test 7"}
                        ];


    list = []
    constructor(){
        const anotherList:any[]=[  
                                { id:1,value:"test 1"},
                                { id:2,value:"test 2"}
                                ]
        this.globalmarketCategory.setValue(anotherList);
    }
}

来源：https://stackoverflow.com/questions/51542801/angular-6-material-mat-select-multiple-set-default-value-using-form-control

标签

angular