Question

我尝试使用另一个下拉列表选择更改下拉列表的内容。 HTML代码如下。

<div class="form-row">
    <div class="form-group col-md-6">
        <label for="makesel">Make</label>
        <select [ngModel]="vehicle.makeId" class="form-control" id="makesel" (ngModelChange)="onChangeMake($event.target.value)">
            <option>Choose a make</option>
            <option *ngFor="let make of makes" [value]="make.id">{{ make.name }}</option>
        </select>
    </div>
    <div *ngIf="currentMake" class="form-group col-md-6">
        <label for="make">Model</label>
        <select [ngModel]="vehicle.modelId"  class="form-control" id="model">
            <option>Choose a model</option>
            <option *ngFor="let model of currentMake.models" value="{{ model.id }}">{{ model.name }}</option>
        </select>
    </div>
</div>

组件编码如下：

import { Component, Inject } from '@angular/core';
import { Http } from '@angular/http';


@Component({
selector: 'register-form',
templateUrl: './registerform.component.html'
})
export class RegisterFormComponent{
public makes: Make[];
public currentMake: Make;
public vehicle: Vehicle;

constructor(http: Http, @Inject('BASE_URL') baseUrl: string){
    http.get(baseUrl + 'api/makes').subscribe(result => {
        this.makes = result.json() as Make[];
    }, error => console.error(error));
    this.vehicle = new Vehicle();
};

onChangeMake(makeId : number){
    console.log("test");
    this.currentMake = this.makes.filter(x => x.Id == makeId)[0];
}
}

class Make {
Id: number;
Name: string;
Models: Model[];
}

class Model{
Id: number;
Name: string;
}

class Vehicle{
makeId : number;
modelId : number;
registered: boolean;
features: number[];
contactName: string;
contactPhone: string;
contactEmail: string;
}

问题是我尝试的更改事件无论如何都无法正常工作。当前代码使用ngModel和ngModelChange，但我也尝试仅使用

change="onChangeMake($event.target.value)"

但我也没有成功。这似乎是＆＃34; onChangeMake＆＃34;没被打电话。由于除了这两种方法之外我没有找到不同的方法来做到这一点，而且似乎都没有用，我还是要求一些帮助。我错过了什么吗？

供参考：角度版本：4.2.5 TypeScript版本：2.6.2

提前感谢您的回答！

Answer 1

您可以对[(ngModel)]使用双向绑定，将make项设置为[ngValue]的选项值：

<div class="form-row">
    <div class="form-group col-md-6">
        <label for="makesel">Make</label>
        <select [(ngModel)]="currentMake" class="form-control" id="makesel" name="makesel">
            <option>Choose a make</option>
            <option *ngFor="let make of makes" [ngValue]="make">{{ make.name }}</option>
        </select>
    </div>
    <div *ngIf="currentMake" class="form-group col-md-6">
        <label for="model">Model</label>
        <select [(ngModel)]="vehicle.modelId"  class="form-control" id="model" name="model">
            <option>Choose a model</option>
            <option *ngFor="let model of currentMake.models" [value]="model.Id">{{ model.name }}</option>
        </select>
    </div>
</div>

在您的模板中，您使用currentMake.models，model.id和model.name，但这些字段在您的代码中定义为currentMake.Models，model.Id和{{ 1}}。您应该将类定义为：

model.Name

对于调试，您还可以将class Make { id: number; name: string; models: Model[]; } class Model{ id: number; name: string; }定义为属性：

currentMake

Answer 2

正如@ConnorsFan所述，您可以简单地使用[(ngModel)]，但如果由于某种原因您需要使用ngModelChange，则必须传递整个$event，因为它包含<hello name="{{ name }}"></hello> <div class="form-row"> <div class="form-group col-md-6"> <label for="makesel">Make</label> <select [ngModel]="vehicle.makeId" class="form-control" id="makesel" (ngModelChange)="onChangeMake($event)"> <option>Choose a make</option> <option *ngFor="let make of makes" [value]="make.Id">{{ make.Name }}</option> </select> </div> <div *ngIf="currentMake" class="form-group col-md-6"> <label for="make">Model</label> <select [ngModel]="vehicle.modelId" class="form-control" id="model"> <option>Choose a model</option> <option *ngFor="let model of currentMake.models" value="{{ model.id }}">{{ model.name }}</option> </select> </div> </div>当前价值。

<强> Demo

unit = Unit()

在这种情况下如何使用Angular 4触发更改事件？

2 个答案: