Question

我有以下从API返回的对象

并且目标是根据您选择的/ Area / Crag / Route确定自己填充的级联下拉所以我在模板中尝试了以下代码：

   <div class="form-row">
            <div class="form-group col-lg-2">
                <label for="area">Area</label>
                <select class="form-control" id="area" name="SelectedArea" [(ngModel)]="SelectedArea" (change)="onAreaSelected()">
                    <option *ngFor="let a of Areas" [value]="a">{{a.Name}}</option>
                </select>
            </div>
            <div class="form-group col-lg-2">
                <button type="button" class="btn btn-success" id="addArea"><i class="fa fa-plus"></i> add a new area</button>
            </div>
            <div class="form-group col-lg-2">
                <label for="crag">Crag</label>
                <select class="form-control" id="crag" name="SelectedCrag" [(ngModel)]="SelectedCrag" (change)="onCragSelected()">
                    <option *ngFor="let c of SelectedArea.Crags" [value]="c">{{c.Name}}</option>
                </select>
            </div>
            <div class="form-group col-lg-2">
                <button type="button" class="btn btn-success" id="addCrag"><i class="fa fa-plus"></i> add a new crag</button>
            </div>
        </div>

在我的组件中：

import { Component, OnInit } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { TicklistService } from './ticklist.service';
import { Ticks } from '../Models/Ticks';
import { Areas } from '../Models/Areas';
import { Crags } from '../Models/Crags';
import { Routes } from '../Models/Routes';

@Component({
    moduleId: module.id,
    selector: 'addTick',
    templateUrl: './addTick.component.html',
    styleUrls: ['./addTick.component.css'],
    encapsulation: ViewEncapsulation.None,
    providers: [TicklistService]
})

export class AddTickComponent implements OnInit {
    public Tick: Ticks
    public Areas: Areas[];
    public Crags: Crags[];
    public Routes: Routes[];

    public SelectedArea: Areas;
    public SelectedCrag: Crags;
    public SelectedRoute: Routes;

    public Message: string;

    constructor(private _ticklistService: TicklistService) { }

    ngOnInit() {
        this.Areas = [];
        this.SelectedArea = { IDArea: -1, Name: "Select an area", Crags: [] };
        this.SelectedCrag = { IDArea: -1, IDCrag: -1, Name: "Select a crag", Routes: [] };
        this.SelectedRoute = { IDCrag: -1, IDRoute: -1, Grade: "", Name: "Select a route" };
        //retreive data from webapi
        this.getAreas();
    }

    getAreas() {
        var url = 'api/areas/getAllArea';
        this._ticklistService.get(url).subscribe(
            data => {
                this.Areas = data;
                console.log(data);
            },
            error => {
                console.log(error);
                var errorMessage = JSON.parse(error.Message);
                if (errorMessage.error_description) {
                    this.Message = errorMessage.error_description;
                }
            });
    }

在更改区域下拉列表时调用此函数：

  onAreaSelected() {
    console.log(this.SelectedArea);
    console.log(this.SelectedArea.Crags);
}

但不知何故，这给了我[Object object]和undefined而不是当前选中的Area和该区域中的crags：

我在这里缺少什么？

Answer 1

您必须使用onChange（）获取所选值。见下文。

<select class="form-control" id="area" name="SelectedArea" [(ngModel)]="SelectedArea" (change)="onAreaSelected($event.target.value)">
    <option *ngFor="let a of Areas" [value]="a">{{a.Name}}</option>
</select>

onAreaSelected(selectedArea) {
    this.selectedArea = selectedArea;
    console.log(this.SelectedArea);
    console.log(this.SelectedArea.Crags);
}

有关详细信息，请查看此答案https://stackoverflow.com/a/33716321/1849366。

Answer 2

所以我发现了如何解决我的问题。实际上问题是我正在使用[value] =＆＃34; a＆＃34;。我切换到[ngValue] =＆＃34; a＆＃34;。我甚至不需要（改变）功能。

对象属性的Angular 2级联下拉列表

2 个答案: