Question

新角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（）”是。同样有趣的是，如果我更改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，它是 (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>

Answer 2

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

Answer 3

正如@Sajeetharan正确指出的那样，您对@Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { updateUI() } @Override public void onResume() { super.onResume(); updateUI(); } public void updateUI() { ModelSingleton modelSingleton = Model.get(getActivity()); List<Model> models= modelSingleton.getModels(); if (mAdapter == null) { mAdapter = new MyAdapterItemMySerie(getContext(), models); mRecyclerView.setAdapter(mAdapter); } else { mAdapter.setModels(models); mAdapter.notifyDataSetChanged(); } updateSubtitle(); } ....的使用是错误的。

如果使用标准HTML控件，则所需的事件为onChange。但是，如果您使用的是change（您自己的答案提示），则需要使用Angular Material而不是selectionChange。检出API here

（onChange）不适用于Dropbox中的Angular4选择

3 个答案: