Как установить значение по умолчанию для 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, которая вызывает ошибку.

Я устанавливаю [данные] с массивом допустимых параметров, но ничего не выбрано. Кроме того, я вижу этот огонь даже при открытии раскрывающегося списка.

Это также не работает в одном режиме.

Как я могу предварительно выбрать «опции» для этого элемента управления?

Я использую это с RC.1. Другие решения на SO выглядят как более старые версии ng2.

Answer 1

https://valor-software.com/ng2-select/ Под несколькими вкладками показано использование элемента [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> 

Импорта следующих классов:

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

В компонентной CLAS s, доступ к my-select компонент с помощью @ViewChild декоратора:

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

Дайвинг в NG2-выберите исходный код намекает, что active свойство на SelectComponent имеет выбранные значения. Кроме того, active представляет собой массив объектов SelectItem. Таким образом, создание объектов SelectItem и их толкание в массив active должно позволить вам программно добавлять/удалять выбранные элементы.

Приходя к вашему вопросу, позволяет установить несколько значений по умолчанию для 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

Текущая версия Docs объяснил лучше: ng2-select/valor-software.com

вид сбоку (категория-edit.component.HTML):

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

Независимо от того, если есть один или несколько элементов, всегда должен содержать формат массива, Ex .: [{ID: 1, текст: MYTEXT}] или [{ID: 1, текст: MyText1}, {ID: 2, текст: 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);} 
    ); 
} 

}