ngSwitch 不工作答案

【问题标题】：ngSwitch not workingngSwitch 不工作
【发布时间】：2017-09-06 09:43:22
【问题描述】：

年份下拉菜单未显示选项 3 或 4- 我想根据所选课程显示年份下拉菜单。

这是代码-

    <div class="form-group">
      <label for="course">Course:</label>
      <select class="form-control" id="course" ngModel name="course" #name required>
        <option *ngFor="let course of courses" [value]="course">{{course}}</option>
      </select>
    </div>
    <div class="form-group">
      <label for="year">Year:</label>
      <select class="form-control" id="year" ngModel name="year" required [ngSwitch]="course">
        <option>1</option>
        <option>2</option>
        <option *ngSwitchCase="'MCA'">3</option>
        <option *ngSwitchCase="'B. Tech'">4</option>
      </select>
    </div>

在 component.ts 中存在以下数组-

  courses = ['B. Tech', 'M. Tech', 'MBA', 'MCA', 'PGDM'];

【问题讨论】：

我在您的代码中看不到 ngSwitch 内的 ngFor。 *ngFor 在<option> 元素上，它只包含{{course}}，但没有ngSwitch
@GünterZöchbauer 我正想说同样的话 :)
我想我使用了错误的标题，我的意思是我无法让 ngSwitch 工作
尝试给你的 ngModel 一个值？喜欢[(ngModel)]="course" ?
也尝试从您的*ngSwitchCase中删除引号

标签： html angular angular-directive

【解决方案1】：

ngSwitch 工作正常，您唯一需要更改的是将变量绑定到第一个选择标记中的ngModel 喜欢：[(ngModel)]="course"

<div class="form-group">
  <label for="course">Course:</label>
  <select class="form-control" id="course" [(ngModel)]="course" name="course" #name required>
    <option *ngFor="let course of courses" [value]="course">{{course}}</option>
  </select>
</div>

【讨论】：