angularjs：加载时无法在 md-select 中显示多个选定项目答案

【问题标题】：angularjs: Cannot show multiple selected items in md-select on loadangularjs：加载时无法在 md-select 中显示多个选定项目
【发布时间】：2020-05-02 05:06:17
【问题描述】：

我正在学习使用“Angularjs”开发网络应用程序。

应用程序的网页是用户编辑其个人资料的输入表单。输入表单在角度材料显示控件中显示用户的现有详细信息。我正在使用“md-select”下拉菜单来显示用户的爱好。但是我无法在“md-select”下拉列表中显示现有的爱好。

以下是非工作代码：

HTML：

<md-select ng-model="ctrl.exthobbies" ng-model-options="{trackBy: '$value.id'}">
    <md-option ng-repeat="n in ctrl.hobbies" ng-value="n">
      {{ n.value }}
    </md-option>
</md-select>
<p>number: {{ ctrl.exthobbies}}</p>

JS：

   _this.exthobbies= [{id: 1, value: "Reading"},{id: 6, value: "Paragliding"}];
    _this.hobbies= [
      {id: 0, value: "None"},
      {id: 1, value: "Reading"},
      {id: 2, value: "Writing"},
      {id: 3, value: "Driving"},
      {id: 4, value: "Swimming"},
      {id: 5, value: "Skating"},
      {id: 6, value: "Paragliding"},
      {id: 7, value: "Hiking"}
    ];

请在“Codepen”中找到完整的代码： https://codepen.io/oiproj/pen/KKwBxoM

问题：能否解决？

【问题讨论】：

问题是在页面加载时在下拉菜单中选择“exthobbies”？
有单项时，下拉显示。下一个。代码适用于单个项目 ---- "_this.exthobbies = {id: 1, value: "Reading"};"如何为多个项目准备 _this.exthobbies？

标签： angularjs angular-material md-select

【解决方案1】：

您应该将 multiple="true" 添加到 md-select 以支持多个项目：

<md-select multiple="true" ng-model="ctrl.exthobbies" ng-model-options="{trackBy: '$value.value'}">
    <md-option ng-repeat="n in ctrl.hobbies track by n.value" ng-value="n">
      {{ n.value }}
    </md-option>
  </md-select>

【讨论】：