javascript - (onChange) not working for Angular4 select in dropbox - Stack Overflow

admin管理员组

文章数量:1287787

new to angular 4 and i'm building something.

I have a couple ponents, 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 boBox 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 ponent'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: './filteringponent.html',
  styleUrls: ['./filteringponent.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'); 
  }

}

new to angular 4 and i'm building something.

I have a couple ponents, 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 boBox 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 ponent'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.ponent.html',
  styleUrls: ['./filtering.ponent.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'); 
  }

}

• javascript
• angular

Share Improve this question Follow edited Oct 29, 2017 at 8:11 Dale Baker asked Oct 29, 2017 at 8:05 Dale BakerDale Baker 33911 gold badge33 silver badges1414 bronze badges 3

• I've tried that, still no luck. – Dale Baker Commented Oct 29, 2017 at 8:09
• Please provide a demo (plunker/stackblitz..) that showcases this issue :) – AVJT82 Commented Oct 29, 2017 at 8:15
• The problem lies somewhere else. I created a stackblitz demo from your code, and it works as expected, when you fix the binding to (change)="onChange()". stackblitz./edit/angular-playground-s7sqfo – Martin Adámek Commented Oct 29, 2017 at 9:37

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 9

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>

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

Interestingly enough, when I use the materialise css framework, (change) does not work, but if I do not use it, it does work.

本文标签： javascript(onChange) not working for Angular4 select in dropboxStack Overflow