CODEWITHSUNDEEP
angular
Tee-Jay
Tee-Jay

Reputation: 733

ng2-select generates error cannot find name SelectItem

I am using ng2-select and cant seem to find my way around it.

GetCountriesWithNameAndID(){
    this.countryService.GetCountriesWithNameAndID()
        .subscribe((res: ICountry[]) => {
            this._countries = res;
            this._countries.forEach((country: ICountry) => {
                //console.log(country.CountryID + "===========================" + country.CountryName);
                this.items.push(country.CountryName);
                //this.items.push({
                //    id: country.CountryID,
                //    text:country.CountryName
                //})
                this.select.itemObjects.push(new SelectItem({ id: country.CountryID, text: country.CountryName }));

            })

        })
}

I found a simillar question here and tried to follow the response but got stuck

Upvotes: 2

Views: 710

Answers (3)

Tee-Jay
Tee-Jay

Reputation: 733

I restarted Visual Studio with the "SelectItem" import statement and everything in place as it was and the problem disappeared.

Upvotes: 0

Karl
Karl

Reputation: 3099

I bypassed using the "SelectItem" object for some reason. Not sure wether there was a bug in the ng2-bootstrap implementation, object is not exported or any other conflict

So I worked around this as shown in the following snippet from encapsulating ng2-select functionality which shows relevant methods for fetching remote data and preparing them for being shown in the select.

import { Component, Input, Output, EventEmitter, ViewChild} from '@angular/core';
import { SelectComponent } from 'ng2-select';
import { Observable } from 'rxjs/Rx';

@Component({
    selector: 'my-select',
    template:  `<ng-select
                    (active)="selected_item"
                    [allowClear] = "allowClear"
                    [items] = "myRecords"
                    [disabled] = "disabled"
                    (data) = "refreshValue($event)"
                    (selected) = "selected($event)"
                    (removed) = "removed($event)"
                    (typed) = "typed($event)"
                    placeholder = "{{placeholder}}">
                </ng-select>`
})

export class mySelect {
    constructor() {}

    myRecords: any[];    
    mySelectItems: any[];
    ....
    // get Items for select
    getItems(searchstring: string) {
        var self = this;

        // fetch items from remote datasource  
        this.dataService.getRecords(this.webapi_data, this.pageno, this.pagesize, this.sortcolumn, this.data_filter, null, null)
            .subscribe((data: any[]) => {
                var response: any = data;
                var myrecs = response.items;

                // prepare fetched data for ng2-select datastructure and assign to bound array
                this.myRecords = this.getData(myrecs);
            },
            error => {
                console.log("MySelect: " + error);
            });
    }

    // convert fetched to ng2-select datastructure
    getData(data: any): any {
        this.mySelectItems = [];
        try {
            for (let entry of data) {
                var t: Object = {};
                t['id'] = entry[this.valuefield];
                t['text'] = entry[this.textfield];
                this.mySelectItems.push(t);
            }
        } catch (e) {
            console.log('my Select fill box:' + e);
        }
        return this.mySelectItems;
    }
    ....
}

Upvotes: 0

Milad
Milad

Reputation: 28590

import { SelectItem } from 'ng2-select/components/select/select-item';

Upvotes: 1

Related Questions