如何在角度材料2中选择默认项目选择多个

2024-03-20

我正在开发 Angular 2 Material 应用程序,我有一个情况,其中存在多选元素,并且我有一个带有复选框的列表,因此我可以一次选择多个项目。我可以使用角度材质组件来实现这一点,但我想要的是默认检查 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'}]

有没有其他方法或者我在某些地方出错了。


如果你绑定object to option of select, Angular 将通过对象实例比较默认值和选项值。这里{name: 'abc'} and {name:'cbv'} of list and test具有相同的字段和值,但它们保留不同的实例。所以没有人会解决selected.

@yurzui 的答案将通过在两个数组中保留相同的对象实例来工作。

另一个解决方案(您不需要保留相同的对象实例)是使用compareWith指令,参见docs https://angular.io/api/forms/SelectControlValueAccessor#caveat-option-selection。这样你应该实现一个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;
}

see demo https://stackblitz.com/edit/angular-7s4hrb?file=app%2Fselect-value-binding-example.html.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在角度材料2中选择默认项目选择多个 的相关文章

随机推荐