HTML选择下拉菜单不更改页面数据答案

【问题标题】：HTML Select Dropdown Not Changing Page DataHTML选择下拉菜单不更改页面数据
【发布时间】：2021-07-16 14:01:29
【问题描述】：

我正在尝试在我的 html 页面上创建一个下拉列表来选择年份。我有一个看起来像这样的年份数组：

0: {number: 3, name: "Year 3", subjects: Array(5)}
1: {number: 4, name: "Year 4", subjects: Array(5)}
2: {number: 5, name: "Year 5", subjects: Array(5)}

当一年被选中时，我希望它检查那一年是否有选定的主题，如果有，打印名称。这是我的 html 代码：

  <select [(ngModel)]="selectedYear.name">
    <option
      [label]="year.name"
      *ngFor="let year of yearDropdown"
      [selected]="selected"
      [value]="year.name"
    ></option>
  </select>

  <div class="card-body">
    {{ selectedYear.name }}
    <div *ngFor="let subject of selectedYear.subjects">
      <ng-container *ngIf="subject.name === selectedSubject.name">
        {{ subject.name }}
      </ng-container>
    </div>
  </div>

但是，它仅在首次加载时打印出值，一旦选择一年，它就不会重新运行代码。有谁知道如何进行这项工作？

【问题讨论】：

标签： javascript html angularjs

【解决方案1】：

像这样将 onChange 添加到您的选择 <select onchange="onChange()">

试试这个：

import {ChangeDetectorRef} from @angular/core

constructor(private ref:ChangeDetectorRef){}

onChange() {
    this.ref.detectChanges();
}

【讨论】：

谢谢，但我现在收到此错误：未捕获的 ReferenceError: onChange is not defined at HTMLSelectElement.onchange
你使用的是同一个组件吗？
@User4612 我对代码进行了测试，您可能需要更改某些内容以使其与您的代码相匹配，它应该只会为您提供正确的方向，谷歌如何将 onChange 添加到角度选择中

【解决方案2】：

要动态显示年份下拉列表，您可以执行以下操作

显示年份下拉列表，其中年份

var min = new Date().getFullYear(), //当前年份 stop = 2000. // 你想停止的年份 select = document.getElementById('selectElementId');

for (var i = min; i >= stop; i--){ var opt = document.createElement('option'); 选择值=我； opt.innerHTML = i; select.appendChild(opt); }
显示年份下拉菜单>当前年份

var min = new Date().getFullYear(), 最大值 = 最小值 + 15， select = document.getElementById('selectElementId');

for (var i = min; i

【讨论】：