angular - Angular2 Material 设计中的下拉列表复选框

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

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

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

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

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

然后您可以使用 *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>