Ng2-select: Add possibility to assign object to active property instead of array.

Created on 12 Dec 2016  路  4Comments  路  Source: valor-software/ng2-select

In the source code we have the following code:

@Input()
  public set active(selectedItems:Array<any>) {
    if (!selectedItems || selectedItems.length === 0) {
      this._active = [];
    } else {
      let areItemsStrings = typeof selectedItems[0] === 'string';

      this._active = selectedItems.map((item:any) => {
        let data = areItemsStrings
          ? item
          : {id: item[this.idField], text: item[this.textField]};

        return new SelectItem(data);
      });
    }
  }

The selectedItems.map statement doesn't allow to assign simple object. The ng2-select supports single and multiple selection, so I think it's better to check what is passed to active and do appropriate actions. If simple object then just return it, if array then the current code.

My use case.
I have a lot of selects on a page. There is a table and inside of cells user can create up to 2 selects. So, I use:

//...
 <ng-select *ngFor="let member of date.members; let i = index;"
                                               [items]="allMembers"
                                               [active]=date.member[i]
                                               (data)="updateSelectedMember($event,....)"
                                               placeholder="Select member">
                                    </ng-select>

And, I want to bind specific object to active.

Most helpful comment

This actually is documented as a feature for ng2-select and was super surprised to see it not work as it specified.

http://valor-software.com/ng2-select/

active (?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.

I can implement this functionality if the team is willing to take a PR for the issue. Otherwise, I can help clean up the documentation to properly reflect what the possible values are.

All 4 comments

This actually is documented as a feature for ng2-select and was super surprised to see it not work as it specified.

http://valor-software.com/ng2-select/

active (?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.

I can implement this functionality if the team is willing to take a PR for the issue. Otherwise, I can help clean up the documentation to properly reflect what the possible values are.

i have this array, but the default value setted by ngModel = 'RJ' throw this error below:

[ERROR]
error_handler.js:54 EXCEPTION: Uncaught (in promise): Error: Error in ./UserProfileComponent class UserProfileComponent - inline template:123:21 caused by: selectedItems.map is not a function

[HTML]
[items]="ufs"
[(ngModel)]="profile.address.state"
name="state"
placeholder="uf">

[attempts]
I tried all of this options, and none of those worked!

  1. [active]="ufs[18]"
  2. [active]="ufs"
  3. [active]="'RJ'"

[My simple Array]
getDataStr():Array {
return [
'AC',
'AL',
'AM',
'AP',
'BA',
'CE',
'DF',
'ES',
'GO',
'MA',
'MG',
'MS',
'MT',
'PA',
'PB',
'PE',
'PI',
'PR',
'RJ',
'RN',
'RO',
'RR',
'RS',
'SC',
'SE',
'SP',
'TO'];
}

this code works for me

`

public items: Array\ active:Array\

// prints Barcelona`

I still have the same issue, can anybody help please?
[items]="furniture"
placeholder="No furnitre selected">

furniture: Array = [
{ "id": 1, "text": "Table" },
{ "id": 2, "text": "Chair" },
{ "id": 3, "text": "Light" }

];
Was this page helpful?
0 / 5 - 0 ratings

Related issues

Matiszak picture Matiszak  路  6Comments

BenDevelopment picture BenDevelopment  路  5Comments

TheBurgerShot picture TheBurgerShot  路  4Comments

rkralston picture rkralston  路  3Comments

denghuiquan picture denghuiquan  路  3Comments