如何选择角度材质中的默认项目2选择多个

Question

我正在研究角度2素材应用程序,我有一个有多选元素的情况,并且我有一个带复选框的列表,所以我可以一次选择多个项目.我能够使用角度材质组件,但我想要的是默认情况下要检查的2-3个项目,如果我选择/取消选择特定项目,那么我应该选中/选择标记为true/false.

<md-select multiple="true" [(mgModel)]="test">
  <md-option *ngFor="let l of list" [value]="l">
    {{l.name}}
  </md-option>
</md-select>

var list = [{name:'abc'},{name:'cbv'},{name:'hgf'},{name:'rty'},{name:'fdv'},{name:'vbg'}]

var test = [{{name:'abc'},{name:'cbv'}]

是否有其他方法或在某些地方出错.

Answer 1

如果绑定object到option的select,角度会比较默认值和对象实例选项的值.这里{name: 'abc'}和{name:'cbv'}有list和test相同的归档和价值,但他们保持不同的实例.所以没有人会被设定selected.

@ yurzui的答案将通过在两个数组上保持相同的对象实例来工作.

另一个解决方案(您不需要保持相同的对象实例)是使用compareWith指令,请参阅docs.这样你就应该实现一个compareWith函数来告诉angular如何比较对象.

<md-select multiple="true" [(ngModel)]="test" [compareWith]="compareWithFunc">
  <md-option *ngFor="let l of list" [value]="l">
    {{l.name}}
  </md-option>
</md-select>

compareWithFunc(a, b) {
  return a.name === b.name;
}

看看演示.