角度4 NG-選択データ

Question

を変換するには、角度-CLI

を使用して角度のプロジェクトを作成した私は、選択ボックスを変更するための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" 
    } 
] 

my.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> 

は、ここで問題です。 selectboxでアイテムを選択するたびに、selectbox（a.k.a空白）に表示されません。

ラベルとIDの名前を値に渡す方法はありますか？

おかげ

Answer 1

あなたはそれについてより具体的にすることができますngModel