Angular ng2选择生成错误找不到名称SelectItem
我正在使用ng2 select,似乎无法找到解决方法Angular ng2选择生成错误找不到名称SelectItem,angular,Angular,我正在使用ng2 select,似乎无法找到解决方法 GetCountriesWithNameAndID(){ this.countryService.GetCountriesWithNameAndID() .subscribe((res: ICountry[]) => { this._countries = res; this._countries.forEach((country: ICountry) =>
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 }));
})
})
}
我发现了一个类似的问题,并试图跟踪回答,但由于某种原因,我没有使用“SelectItem”对象。不确定ng2引导实现中是否存在bug、对象是否未导出或是否存在任何其他冲突
import { SelectItem } from 'ng2-select/components/select/select-item';
因此,我解决了这个问题,如下面的代码片段所示,它封装了ng2select功能,展示了获取远程数据并准备在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;
}
....
}
从'@angular/core'导入{Component,Input,Output,EventEmitter,ViewChild};
从“ng2 select”导入{SelectComponent};
从'rxjs/Rx'导入{Observable};
@组成部分({
选择器:“我的选择”,
模板:`
`
})
导出类mySelect{
构造函数(){}
我的记录:任何[];
所选项目:任何[];
....
//获取要选择的项目
getItems(searchstring:string){
var self=这个;
//从远程数据源获取项目
this.dataService.getRecords(this.webapi_data,this.pageno,this.pagesize,this.sortcolumn,this.data_filter,null,null)
.订阅((数据:any[])=>{
var响应:任意=数据;
var myrecs=response.items;
//为ng2 select数据结构准备提取的数据并分配给绑定数组
this.myRecords=this.getData(myrecs);
},
错误=>{
log(“MySelect:+错误”);
});
}
//将提取的数据转换为ng2 select数据结构
getData(数据:任意):任意{
this.mySelectItems=[];
试一试{
用于(让输入数据){
var t:Object={};
t['id']=条目[this.valuefield];
t['text']=条目[this.textfield];
this.mySelectItems.push(t);
}
}捕获(e){
log('my Select fill box:'+e);
}
返回此.mySelectItems;
}
....
}
我用“SelectItem”导入语句重新启动了Visual Studio,一切都原封不动,问题消失了。您导入了SelectItem吗?是的,我尝试导入,但它似乎不在包中,其中ng2 select从“ng2 select/ng2 select”导入{SelectComponent,SelectItem};我刚检查过,它就在那里,非常奇怪,上面是我的导入行,它正在生成error@JuliusTetteh,什么不起作用?如果导入不起作用,请检查您的节点模块并找到包,确保select item在那里并且路径正确您提供的导入语句奇怪的是文件就在导入语句指定的位置,所以当您执行console.log(SelectItem)时;就在导入之后,它是未定义的?从“ng2 SELECT/ng2 SELECT”导入{SELECT_DIRECTIVES};我看到您完全绕过了SelectItem。我明白了。我们会回复您,让您知道它是如何根据上述解决方案重新编写我的旧代码的。因此,我不再使用这种变通方法。