it-swarm.dev

Angular 6 Malzeme <mat-select> form kontrolünü kullanarak çoklu set varsayılan değeri

Form kontrolü kullanıyorum burada html bileşenimin kodu

<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>

Ve ts dosyam 

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)
  }
}

Mat seçimi için varsayılan değer belirlemek istiyorum, bunun için herhangi bir yardım büyük olacaktır. Birden fazla varsayılan değer ayarlamak istiyorum.

3
Abhishek

Sorun, seçeneklerinin nesne olması gerçeğinden kaynaklanıyor. Seçimlerin uygulanabilmesi için, seçilen nesnelerin, seçenekler için kullanılan nesnelerle aynı olması gerekir. Kodunuzu aşağıdaki gibi düzeltin:

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)
    }
}
1
G. Tranter