Question

我有两个带有两个不同ngModelChange方法的下拉菜单：

<div class="mb-40">
  <div class="tit03 mb-20">Type of Healthpros</div>
  <select class="form-control" [(ngModel)]="pros" (ngModelChange)="onSelectProfessions($event)">
    <option *ngFor="let item of professions" value="{{item.id}}">{{item.text}}</option>
  </select>
</div>
<div class="mb-40">
  <div class="tit03 mb-20">Type of Specialization</div>
  <select class="form-control" [(ngModel)]="spec" (ngModelChange)="onSelectSpecialities($event)">
    <option *ngFor="let item of specialities" value="{{item.id}}">{{item.text}}</option>
  </select>
</div>

调用以下方法：

onSelectSpecialities($value){
   console.log("Here");
}

onSelectProfessions($value){
   console.log("Here 2");
}

问题在于，当我更改其下拉菜单时会调用onSelectProfessions，但是onSelectSpecialities永远不会被调用：（（仅当我完全删除HTML中的onSelectProfessions后才会调用它，我在做什么错了？

这是我的全部组件：

import { Component, OnInit, ChangeDetectorRef, Input } from '@angular/core';
import * as globals from '../../../app/globals';
import {Observable} from 'rxjs/Rx';
import { UserService } from '../../../services/user.service';
import { UtilService } from '../../../services/util.service';
import { DataService } from '../../../services/data.service';

/*INSTALL*/
import swal from 'sweetalert2';

declare var $: JQuery;

declare global {
  interface JQuery {
    (selector: string): JQuery;
    rating(): JQuery;
  }
}

@Component({
    selector: 'app-list-professional',
    templateUrl: './list.component.html',
    styleUrls: ['./list.component.css']
})
export class ListProfessionalComponent {

    review = {rating:4}
    professionals = [];
    professions = {};
    specialities = {};



    constructor(private userService: UserService, private utilService: UtilService, private dataService: DataService){

        this.textSearch  = "";

    }

    ngOnInit(): void {

        this.utilService.blockUiStart();

        this.userService.getAllProfessionals().subscribe(data => {

            this.professionals = data;

            this.dataService.getProfessions().subscribe(data => { 
                this.professions = data;
            });

            this.dataService.getSpecialities().subscribe(data => {
                this.specialities = data;
            });

            this.utilService.blockUiStop();

        });

    }

    onSubmit($value){
        console.log(this.textSearch);
        this.utilService.blockUiStart();
        this.userService.getProfessionalsByUsername(this.textSearch).subscribe(data => {
            this.professionals = data;
            this.utilService.blockUiStop();
        });
    }


    public onSelectSpecialities($value){

        console.log("Here");

        this.utilService.blockUiStart();
        this.userService.getProfessionalsBySpecialities($value).subscribe(data => {
            this.professionals = data;
            this.utilService.blockUiStop();
        });

    }

    public onSelectProfessions($value){

        this.utilService.blockUiStart();
        this.userService.getProfessionalsByProfessions($value).subscribe(data => {
            this.professionals = data;
            this.utilService.blockUiStop();
        });

    }

}

这是我的完整数据：

[{"id":1,"text":"Cardiology"},{"id":2,"text":"Clinical neurophysiology"},{"id":3,"text":"Endocrinology"},{"id":4,"text":"Geriatrics"},{"id":5,"text":"Internal medicine"},{"id":6,"text":"Nuclear medicine"},{"id":7,"text":"Ophthalmology"}]

和

[{"id":1,"text":"Health Technologist"},{"id":2,"text":"Sport Medicine Physician"},{"id":3,"text":"Medical Receptionist"},{"id":4,"text":"Psychiatry"}]

Answer 1

您尚未在组件类中定义与“ pros”和“ spec”相关的绑定。请在组件类中定义这些模型绑定变量。 100％您的问题得到解决。执行了您的代码，面临同样的问题。然后得到了解决方案和这个结论。

Answer 2

只需复制您的html并添加我的设置代码，一切似乎就可以正常工作了。

尝试以下代码：

组件：

import { Component } from '@angular/core';


@Component({
selector: 'app-multi-dropdown',
templateUrl: 'multi-dropdown.component.html'
})
export class MultiDropDownComponent {

professions: any[] = [
    { id: '1', text: 'Professional1' },
    { id: '2', text: 'Professional2' },
    { id: '3', text: 'Professional3' },
    { id: '4', text: 'Professional4' }
];

specialities: any[] = [
    { id: '1', text: 'specialities1' },
    { id: '2', text: 'specialities2' },
    { id: '3', text: 'specialities3' },
    { id: '4', text: 'specialities4' }
];

public onSelectSpecialities($value) {
    console.log('Specialities changed');

}

public onSelectProfessions($value) {
    console.log('Professional changed');
}
}

HTML：

    <h1>Multidrop down compnent</h1>
    <div class="mb-40">
        <div class="tit03 mb-20">Type of Healthpros</div>
        <select class="form-control" [(ngModel)]="pros" (ngModelChange)="onSelectProfessions($event)">
            <option *ngFor="let item of professions" value="{{item.id}}">{{item.text}}</option>
        </select>
    </div>
    <div class="mb-40">
        <div class="tit03 mb-20">Type of Specialization</div>
        <select class="form-control" [(ngModel)]="spec" (ngModelChange)="onSelectSpecialities($event)">
            <option *ngFor="let item of specialities" value="{{item.id}}">{{item.text}}</option>
        </select>
    </div>

Angular 2 ngModelChange在第二个下拉列表中不起作用

2 个答案: