(onChange) 不适用于 Angular4 在 dropbox 中选择

Question

Angular 4 的新手，我正在构建一些东西。

我有几个组件，其中一个的 html 是这样的：

<div class="row" style="border:1px solid black;">
<br>
<div class="col s1"><h2 class="titleClass">Categories: </h2></div>
    <div *ngFor="let number of numbersList"> 
    <div class="input-field col s2" *ngIf="number < numberOfCategoriesShown">
        <select id={{number}} (onChange)="onChange()" >
            <option value={{allString}}></option>
            <option value={{type}} *ngFor="let type of categoryList[number]">{{type}}</option>
        </select>
        <label>Category {{number + 1}}</label>
    </div>

    </div>
</div>

<button (click)="onChange()"></button>

我希望每当我更改这些选定对象之一中的值时就调用一个函数。该函数称为 onChange。

但是，无论出于何种原因，它都不起作用。但底部的 (click)="onChange()" 是。同样有趣的是，如果我更改组合框的值然后尝试单击该按钮，则该按钮也不起作用。

有人可以帮我吗？我已经在组件的类中声明了 onChange 函数。

我的 .ts 文件如下所示：

  import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';
import { VideoService } from '../../services/video.service';
import { Video } from '../../../assets/video';

@Component({
  selector: 'app-filtering',
  templateUrl: './filtering.component.html',
  styleUrls: ['./filtering.component.css'],
  providers: [VideoService]
})
export class FilteringComponent implements OnInit, OnChanges {

  @Input() 
  changeDetection;

  categoryList: Set<String>[] = new Array();
  numbersList: number[] = new Array();
  tagSet  = new Set<String>();
  allString = 'ALL';
  numberOfCategoriesShown = 10;
  selectedItem;

  ngOnChanges(changes: SimpleChanges): void {
    console.log(JSON.stringify(changes)); 
  }

  constructor(private videoService: VideoService) { 

    for (let i = 0; i < this.videoService.getVideos().length; i++) {
      const categoryTypes = this.videoService.getVideos()[i].category.split('->');
      for (let j = 0; j < categoryTypes.length ; j++) {
        if (this.categoryList.length <= j) {
          this.categoryList.push(new Set());
          this.numbersList.push(this.categoryList.length - 1);
        }
        this.categoryList[j].add(categoryTypes[j]);
      }

      this.tagSet.add(this.videoService.getVideos()[i].tags);
    }
  }

  ngOnInit() {

  }

  onChange(newValue) {
    console.log('woop'); 
  }

}

Answer 1

没有onChange，它是(change)

  <select id={{number}} (change)="onChange()" >

正确的方法是使用ngModelChange

<select id={{number}}   [(ngModel)]="selectedItem" (ngModelChange)="onChange()" >
            <option value={{allString}}></option>
            <option value={{type}} *ngFor="let type of categoryList[number]">{{type}}</option>
 </select>