angular2材质设计中的下拉列表复选框

Question

我想创建一个带有复选框的下拉列表，以便用户可以使用Material Design在Angular 2中选择多个选项。

默认情况下，我想选中所有复选框。 我们如何做到这一点？

这是我的代码，适用于创建带有复选框的DDL：

<md-select multiple placeholder="Section List" [value]="section" options="true"  (ngModelChange)='checkedSection();'>   
   <md-option *ngFor ="let section of selectedSectionList"  >
     {{section.sectionTitle}}
</md-option>

谢谢，

Answer 1

您需要在[ <md-option>标记而不是<md-select>标记中传递[value]。

例如，这有效：

 sectionsSelected = ['A', 'B', 'C', 'D'];
 AllSections = ['A', 'B', 'C', 'D'];

然后在你的HTML

<md-select multiple placeholder="Section List" 
[(ngModel)]="sectionsSelected">
  <md-option *ngFor ="let section of AllSections" [value]="section">
    {{section}}
  </md-option>
</md-select>

Answer 2

这是另一个例子，看起来可能更像您的样子...

您需要在[value] <md-option>标记而不是<md-select>标记中传递[value] 。

您可以使用[(ngModel)]来实现双向数据绑定，该数据绑定最初包含所有选项的完整集合。 该变量将根据用户输入而改变。 如果用户取消选中一个框，则该值将被删除。

因此，我们需要另一个变量来迭代这些选项，以便它们在未选中时仍然显示。

然后，您可以使用* ngFor遍历另一个包含所有要显示选项的变量。

selectedSectionList = [{'sectionTitle': 'Title 1', 'sectionOther': 'awesome stuff'},
    {'sectionTitle': 'Title 2', 'sectionOther': 'awesome stuff'},
    {'sectionTitle': 'Title 3', 'sectionOther': 'awesome stuff'},
    {'sectionTitle': 'Title 4', 'sectionOther': 'awesome stuff'},
  ];

  sectionsSelected = this.selectedSectionList;

您的HTML看起来像这样

<md-select multiple placeholder="Section List" [(ngModel)]="sectionsSelected">
  <md-option *ngFor ="let section of selectedSectionList" [value]="section">
    {{section.sectionTitle}}
  </md-option>
</md-select>