（onChange）はAngular4で動作しませんdropboxで選択します

Question

角度4で新しいと私は何かを構築しています。

私はそれらの1つは、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と呼ばれます。

ただし、何らかの理由で動作していません。しかし、（クリック）= "onChange（）"は下部にあります。私がcomboBoxの値を変更してからボタンをクリックすると、ボタンも機能しません。

誰でも私を助けてくれますか？私はコンポーネントのクラス内で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はありませんが、それは適切な方法は、ngModelChange

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

を使用することです (change)

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

です

Answer 2

興味深いことに、materialize cssフレームワークを使用すると、（変更）は機能しませんが、私がそれを使用しなければ、動作します。