angular 4 ng-select converting data

Question

Created an angular project using angular-cli

I am using https://github.com/basvandenberg/ng-select for modifying selectbox. Getting data from 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 block

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

here is the problem. whenever i choose an item in selectbox , i dont see it in selectbox(a.k.a blank);

how can i pass name to label and id to value?

thanks

score 0 · Answer 1 · answered Aug 24 '17 at 11:54

0

you are not setting selectedCountry which binds to your html with ngModel

answered Aug 24 '17 at 11:54

Kutlu Ozel

182
1
7

can you be more specific about it? i thought ngModel does not have any function here, so i delete it.Still working and still have the problem. – Hasan Satıcı Aug 24 '17 at 12:07
https://basvandenberg.github.io/ng-select/examples/ng-model see the first example here, ngModel binds with the value of option, the list that you provided. You can either use ngModel or just set the ngModel on onSelect event. Read the first explanation of first example. – Kutlu Ozel Aug 24 '17 at 12:18
but in that example array already passing value and label. how can i match them id--> value, name-->label – Hasan Satıcı Aug 24 '17 at 12:24
interface should have these properties.'interface IOption { value: string; label: string; disabled?: boolean; }' . You can use function that casts id-> value, name->label or you can use a different array that have desired attribute naming. – Kutlu Ozel Aug 24 '17 at 12:36

angular 4 ng-select converting data

1 Answers1