如何为 ng2-select 设置默认值

Question

data(?Array) - Initial selection data to set. This should be an object with id and text properties in the case of input type 'Single', or an array of such objects otherwise. This option is mutually exclusive with value.

这是来自网站文档。 GitHub 调用引发错误的 initData。

我正在使用一组有效选项设置 [data]，但 select 没有任何内容。此外，每次打开下拉菜单时，我都看到它甚至会触发。

这在单人模式下也不起作用。

如何为这个控件预select'options'？

我在 RC.1 中使用它。 SO 上的其他解决方案看起来像旧版本的 ng2。

Answer 1

https://valor-software.com/ng2-select/ 在多个选项卡下显示了 [data] 元素的使用。根据项目自述文件，这是不正确的。

将 [data] 替换为 [initData]，如果数据格式正确，则预填充工作正常。

Answer 2

你应该使用

<ng-select [active]="[periods[0]]" [data]="periods"></ng-select>

Answer 3

这对我有用：

<ng-select #my-select [multiple]="true" [items]="dataList"></ng-select>

导入以下 classes:

import { ViewChild } from '@angular/core';
import { SelectComponent, SelectItem } from 'ng2-select';

在组件 class 中，使用 @ViewChild 装饰器访问 my-select 组件：

@ViewChild('my-select') mySelectComponent: SelectComponent;

深入研究 ng2-select 源代码暗示 active 属性 on SelectComponent 持有 selected 值。此外，active 是一个包含 SelectItem 个对象的数组。因此，创建 SelectItem 对象并将它们推入 active 数组应该允许您以编程方式 add/remove selected 项目。

针对您的问题，让我们为 ng2-select 设置几个默认值：

ngOnInit() {
    if(!this.mySelectComponent.active) {
        this.mySelectComponent.active = new Array<SelectItem>();
    }
    this.mySelectComponent.active.push(new SelectItem("Apple"));
    this.mySelectComponent.active.push(new SelectItem("Banana"));
}

您还可以清除所有现有值：

reset() {
    if(this.mySelectComponent.active) {
        this.mySelectComponent.active.length = 0;
    }
}

注意：SelectItem 构造函数将字符串或对象作为参数。如果传入字符串，id 和 text 将设置为字符串值。如果您想为 id 和 text 传递不同的值，您可以这样做：

this.mySelectComponent.active.push(new SelectItem({id:'apl', text:'Apple'}));

Answer 4

当前版本文档解释得更好：ng2-select / valor-software.com

视图侧(类别-edit.component.html):

<ng-select [multiple]="true" [items]="tags" [active]="active_tags"></ng-select>

无论是否有一个或多个元素，总是必须包含数组格式，例如：[{id: 1, text: MyText}] 或 [{id: 1, text: MyText1 }, {id: 2, text: MyText2}]

组件端（类别-edit.component.ts）：

import {Component, OnInit, Injectable} from '@angular/core';

@Injectable()
export class MyService {

   getTagsByCategoryId(id: string): Observable<any> { /** callback */}
}

export interface SelectOption{
   id?: string;
   text?: string;
}

@Component({
  selector: 'app-category-edit',
  templateUrl: 'category-edit.component.html'     
});

export class CategoriesComponent extends OnInit{
   tags: SelectOption[]; /** Assumed you already loaded these */ 
   active_tags: SelectOption[];     

 constructor(private myService:MyService){
   super();
 }
 ngOnInit(){
   this.init();
 }

 init(){

   const id= "the_id"; /** Some valid id to query */
   /** Callback */
   this.myService
       .getTagsByCategoryId(id)(
          response=> {
            if(response.error){ console.error(response.error);}   
            }else{
               console.log(response.result;)
               this.active_tags= <SelectOption[]> response.result;
            }  
          },
          error => {console.error(error);}
     );
 }

}

如何为 ng2-select 设置默认值

How to set default for ng2-select

ng2-bootstrap

angular