如何设置NG2选的选定值 [英] How to set the selected value of the ng2-select

问题描述

我的工作angular2应用程序，我有使用NG2选的多选下拉列表。它的做工精细，同时创造新的条目。但是，试图实现相同而当编辑我无法默认的选择将值拉到形式的数据库

I am working on angular2 application, I have use the ng2-select for the multiselect dropdown. Its working fine while creating new entry. But when trying to implement same while editing I am not able to set the default selected values pulled form database.

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

            }, () => { });
        }
    }

  }

响应之后来到我必须设置在 aminities 价值观NG2选。

请指正如何设置默认选择的值。

Please correct me how to set the default selected values.

推荐答案

如果您想选择所有的 aminities 他们来自回响应后，您可以通过触发它将他们推向有效。

If you want to select all the aminities after they come back from the response you can trigger it by pushing them to active.

这是我发现这样做的唯一途径。这里当然是一个更好的选择。

This is the only way I found to do it. There's certainly a better option.

首先，我们添加所选的视图的孩子。

First we add the select as view children.

import {SELECT} from 'your-location';

export class EditProjectComponent {
    //...

    @ViewChild(Select)
    private select: Select;

    //...
}

（如果你有更多然后1然后用 @viewChildren 和 QueryList＆LT;＆GT; ）

在这之后，我们首先发现，从选择的选项的 itemObjects 。

After that, we first find the options that are selected from the itemObjects.

let arr = [];
arr = this.select.itemObjects.filter((x) => {
   let isAminities = this.aminities.find((y) => y.text === x.text);
   return (isAminities !== -1) ? true: false;
})

现在，我们有改编与我们需要我们只是把它推到选择活动列表中的所有物品。

Now that we have arr with all the items we need we just push it to the select active list.

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)

            }, () => { });
        }
    }

  }

我知道会有其他的选择做到这一点。但到目前为止，这是唯一一个我能一起工作。

I know there will be other options to do this. But so far that's the only one I was able to work with.

这篇关于如何设置NG2选的选定值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！