0

使用 angular-cli 创建了一个 Angular 项目

我正在使用https://github.com/basvandenberg/ng-select来修改选择框。从 rest servis 获取数据。

that is my basic data
[
    {
        "name": "New York",
        "id": "108779345385"
    },
    {
        "name": "London",
        "id": "104207537613"
    },
    {
        "name": "Paris",
        "id": "109677701240"
    }
]

我的.component.ts

import { Component, OnInit, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SelectModule } from 'ng-select';
import { Router } from "@angular/router";
import { FormsModule, ReactiveFormsModule, FormGroup } from '@angular/forms';
import { ApiService, Method } from "../../service/apiservice.service";
import { UsermodalsComponent } from '../modals/usermodals/usermodals.component';
import { IOption } from 'ng-select';
import 'rxjs/Rx';

@Component({
    selector: 'app-add-newaddress',
    templateUrl: './newaddress.component.html',
    providers: [ApiService]
})

@NgModule({
    imports: [
        FormsModule,
        ReactiveFormsModule,
        BrowserModule,
        SelectModule
    ]
})

export class NewaddressComponent implements OnInit {

    newTaskForm: FormGroup;
    cities: Array<IOption>;
    district: Array<IOption>;
    selectedCountry: string;
    noFilterThreshold: number = 6000;

    addressSelection = [];


    constructor(private apiService: ApiService) { }

    getTowns() {
        this.apiService.callService(new Method("Address/GetTowns", null, "get"))
            .subscribe(h => {
                this.cities = h.result; 
            });
    }

    onSelected(option: any) {
        var districtId = option.id;
        this.getSubCities(districtId);
    }

    getSubCities(getDistrict) {
        this.apiService.callService(new Method("Address/GetSubCities?townId='" + getDistrict + "'", null, "get"))
            .subscribe(h => {
                this.district = h.result;
            });
    }


    ngOnInit() {

        this.getTowns();

    }


}

html块

<ng-select placeholder="Select City" [options]="cities" [allowClear]="true" (selected)="onSelected($event)" [(ngModel)]="selectedCountry"
                        name="selectedCountry" [noFilter]="noFilterThreshold" >
                        <ng-template #optionTemplate let-option="option">
                            {{option?.name}}
                        </ng-template>
                    </ng-select>

这就是问题所在。每当我在选择框中选择一个项目时，我在选择框中看不到它（又名空白）；

我如何将名称传递给标签并将 ID 传递给值？

谢谢

4

1 回答 1

0

您没有设置使用 ngModel 绑定到您的 html 的 selectedCountry

于 2017-08-24T11:54:45.193 回答