(onChange) 不适用于 Dropbox 中的 Angular4 选择

Question

new to angular 4 and i'm building something.

I have a couple components, one of them has this as its 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>

I want a function to be called whenever I change a value in one of those select objects. The function is called onChange.

However, for whatever reason, it's not working. But the (click)="onChange()" at the bottom is. Also funnily enough, if I change the value of the comboBox then try clicking the button, then the button doesn't work either.

Could anyone help me please? I've decleared the onChange function inside the component's class.

Here is what my .ts file looks like:

  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

There is no onChange, it is (change)

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

Proper way is to use ngModelChange

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

Answer 2

有趣的是，当我使用 materialize css 框架时，(change) 不起作用，但如果我不使用它，它确实起作用。

Answer 3

As @Sajeetharan correctly points, your use of onChange is incorrect.

If using the standard HTML controls, the event you want is change . But if you're using Angular Material (your own answer hints to that), you need to use selectionChange instead of change . Checkout the API here