如何设置 ng2-select 的 selected 值

Question

我正在开发 angular2 应用程序，我将 ng2-select 用于 multiselect 下拉列表。它在创建新条目时工作正常。但是当 editing 尝试实现相同时，我无法设置默认的 selected 从数据库 .[=12 中提取的值=]

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

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

  }

收到回复后，我必须在 ng2-select.

中设置 aminities 值

请纠正我如何设置默认 selected 值。

Answer 1

如果您想 select 所有 aminities 从响应返回后，您可以通过将它们推送到 active 来触发它。

这是我找到的唯一方法。肯定有更好的选择。

首先我们添加 select 作为视图子项。

import {Select} from 'your-location';

export class EditProjectComponent {
    //...

    @ViewChild(Select)
    private select: Select;

    //...
}

（如果你有超过 1 则使用 @viewChildren 和 QueryList<>）

之后，我们首先从 itemObjects.

中找到 selected 的选项

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

现在我们已经 arr 包含我们需要的所有项目，我们只需将其推送到 select 活动列表即可。

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)

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

  }

我知道还有其他选择可以做到这一点。但到目前为止，这是我唯一能够使用的。

如何设置 ng2-select 的 selected 值

How to set the selected value of the ng2-select

select

angular

multi-select