Angular 6 Material <mat-select> 使用表单控件设置多个默认值答案

【问题标题】：Angular 6 Material <mat-select> multiple set default value using form controlAngular 6 Material <mat-select> 使用表单控件设置多个默认值
【发布时间】：2019-01-03 16:24:53
【问题描述】：

我在这里使用表单控件是我的 html 组件的代码

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

我的 ts 文件是

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 select 设置默认值，任何帮助如何实现这一点都会很棒。我想设置多个默认值。

【问题讨论】：

标签： angular angular-material material-design form-control

【解决方案1】：

问题在于您的选项是对象。为了应用选择，所选对象必须与用于选项的对象相同。修改你的代码如下：

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

【讨论】：

能否请您提供 HTML，因为它有点令人困惑。
HTML 没有变化 - 使用原版。
@G.Tranter 我正在用 api 数据填充列表，因为我在 ngInit 上绑定了toppingList 所以，当我在bindData() 中得到toppingList[0] 和toppingList[1] 时，我得到了错误属性未定义。
bindData() 从构造函数中调用，该构造函数在ngOnInit() 之前运行。填充数据后尝试调用bindData()。

【解决方案2】：

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

【讨论】：

@palani 还添加描述您的代码与接受的一次有什么区别
我已经包含了 ui 和 typescript，它工作正常。

【解决方案3】：

您可以使用mat-select 的compareWith 属性。看到那个答案https://stackoverflow.com/a/57169425/1191125

【讨论】：

【解决方案4】：

在使用多个时使用 compareWith 函数。

所以 HTML 看起来像

 <mat-form-field>
  <mat-select
    [compareWith]="compareFn"
    [(ngModel)]="theArrayofSelectedValues">
       <mat-option  *ngFor="let obj of listOfObjs" [value]="obj">
          {{ obj.name }}
       </mat-option>
    </mat-select>
</mat-form-field>

在TS中比较Fn

compareFn(o1: any, o2: any) {
  if(o1.id == o2.id )
  return true;

}

【讨论】：