如何设置ng2 select的选定值
我正在开发angular2应用程序,我使用了ng2 select作为multiselect下拉列表。创建新条目时工作正常。但在编辑时尝试实现相同的时,我无法设置从数据库中提取的默认选定值如何设置ng2 select的选定值,select,angular,multi-select,Select,Angular,Multi Select,我正在开发angular2应用程序,我使用了ng2 select作为multiselect下拉列表。创建新条目时工作正常。但在编辑时尝试实现相同的时,我无法设置从数据库中提取的默认选定值 <ng-select [initData]="aminities" (data)="refreshValue($event)" [multiple]="true" [items]="items" [disabled]="disabled"></ng-select> export
<ng-select [initData]="aminities" (data)="refreshValue($event)" [multiple]="true" [items]="items" [disabled]="disabled"></ng-select>
export class EditProjectComponent {
project: ProjectModel;
routeParam: RouteParams;
aminities: any;
private items: Array<string> = ['Swimming Pool', 'Gymnasium', 'Lift', 'Power Backup',
'Landscaped Garden', 'Security', 'Community Hall', 'Jogging Track', 'Childrens Play Area'];
constructor(
@Inject(Router) private router: Router,
@Inject(ProjectService) private projectService: ProjectService,
routeParam: RouteParams,
private _formBuilder: FormBuilder
) {
this.project = new ProjectModel();
this.routeParam = routeParam;
if (this.routeParam.params['id'] != undefined) {
this.projectService.getbyId(this.routeParam.params['id'], (res) => {
this.project = res;
this.aminities = this.project.overview.aminities;
}, () => { });
}
}
}
导出类EditProjectComponent{
项目:项目模型;
路线图:路线图;
胺:任何;
私人物品:数组=[“游泳池”、“健身房”、“电梯”、“备用电源”,
「园景花园」、「保安」、「社区会堂」、「慢跑径」、「儿童游乐场」;
建造师(
@注入(路由器)专用路由器:路由器,
@注入(ProjectService)私有ProjectService:ProjectService,
路线图:路线图,
私有_formBuilder:formBuilder
) {
this.project=新项目模型();
this.routeParam=routeParam;
if(this.routeParam.params['id']!=未定义){
this.projectService.getbyId(this.routeParam.params['id'],(res)=>{
this.project=res;
this.aminities=this.project.overview.aminities;
}, () => { });
}
}
}
收到响应后,我必须在ng2 select中设置aminities值
请更正如何设置默认选定值。如果要在响应返回后选择所有的
aminities
,可以通过将它们按到活动状态来触发它
这是我找到的唯一方法。当然还有更好的选择
首先,我们添加select as视图子项
import {Select} from 'your-location';
export class EditProjectComponent {
//...
@ViewChild(Select)
private select: Select;
//...
}
(如果超过1,则使用@viewChildren
和QueryList
)
之后,我们首先从itemObjects
中找到选择的选项
let arr = [];
arr = this.select.itemObjects.filter((x) => {
let isAminities = this.aminities.find((y) => y.text === x.text);
return (isAminities !== -1) ? true: false;
})
现在我们有了arr
和所有需要的项目,我们只需将其推到选择活动列表
this.select.active.push(arr)
最终结果是:
export class EditProjectComponent {
project: ProjectModel;
routeParam: RouteParams;
aminities: any;
@ViewChild(Select)
private select: Select;
private items: Array<string> = ['Swimming Pool', 'Gymnasium', 'Lift', 'Power Backup',
'Landscaped Garden', 'Security', 'Community Hall', 'Jogging Track', 'Childrens Play Area'];
constructor(
@Inject(Router) private router: Router,
@Inject(ProjectService) private projectService: ProjectService,
routeParam: RouteParams,
private _formBuilder: FormBuilder
) {
this.project = new ProjectModel();
this.routeParam = routeParam;
if (this.routeParam.params['id'] != undefined) {
this.projectService.getbyId(this.routeParam.params['id'], (res) => {
this.project = res;
this.aminities = this.project.overview.aminities;
let arr = [];
arr = this.select.itemObjects.filter((x) => {
let isAminities = this.aminities.find((y) => y === x.text);
return (isAminities !== -1) ? true: false;
})
this.select.active.push(arr)
}, () => { });
}
}
}
导出类EditProjectComponent{
项目:项目模型;
路线图:路线图;
胺:任何;
@ViewChild(选择)
私人选择:选择;
私人物品:数组=[“游泳池”、“健身房”、“电梯”、“备用电源”,
「园景花园」、「保安」、「社区会堂」、「慢跑径」、「儿童游乐场」;
建造师(
@注入(路由器)专用路由器:路由器,
@注入(ProjectService)私有ProjectService:ProjectService,
路线图:路线图,
私有_formBuilder:formBuilder
) {
this.project=新项目模型();
this.routeParam=routeParam;
if(this.routeParam.params['id']!=未定义){
this.projectService.getbyId(this.routeParam.params['id'],(res)=>{
this.project=res;
this.aminities=this.project.overview.aminities;
设arr=[];
arr=this.select.itemObjects.filter((x)=>{
让isAminities=this.aminities.find((y)=>y==x.text);
返回值(IsAdminities!=-1)?真:假;
})
此.select.active.push(arr)
}, () => { });
}
}
}
我知道还有其他的选择。但到目前为止,这是我唯一能处理的问题。你不能用选定的值再次生成新的select并再次初始化ng2 select吗?我不太明白你的问题。您是否正在尝试更改所选内容上的项目?或者您正在尝试选择一个值?this.project.overview.aminities只是字符串数组,然后在find just do:y==x.text
@joelalmeda您能解释一下从“您的位置”导入{select}时您的位置吗;?我试图从“ng2 SELECT/ng2 SELECT”中导入{SELECT},在那里我得到SELECT_指令,但出现错误。@DarshanPuranik它应该是SELECT
,而不是SELECT
。抱歉。@Joelalmeda我无法在导入语句中获取Select。我似乎找不到我的朋友。