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

时间:2017-09-12 06:34:18

标签: angular angular-material2

我正在研究角度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'}]

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

2 个答案:

答案 0 :(得分:8)

如果将cordova.system.library.1=com.google.android.gms:play-services-location:11.0.1 cordova.system.library.6=com.google.firebase:firebase-messaging:11.0.1 绑定到object option,则angular会将默认值和选项值与对象实例进行比较。 select{name: 'abc'}的{​​{1}}和{name:'cbv'}具有相同的字段和值,但它们保留不同的实例。所以没有人会被设置为list

@ yurzui的回答将通过在两个数组中保持相同的对象实例来实现。

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

selected

请参阅 demo

答案 1 :(得分:4)

您的test数组应包含list数组中的元素:

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

test = this.list.slice(0,2);

<强> Plunker Example