ng2-select not working when I get data from api and cast it in initData

Created on 16 Sep 2016 · 11Comments · Source: valor-software/ng2-select

I use two ng2-select in one form. I retrieve data from api and set into the array but it not working correctly. bellow is my code. when I hard code it is working fine.

.Ts

`[import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { InviteUserComponent } from './invite-user.component';
import { UserListComponent } from './user-list.component';
import { SimpleNotificationsComponent } from 'angular2-notifications';
import { AuthorizeUserDirective } from '../../directives/authorize-user.directive';
import { UserService} from '../../services/user.service';
import {Observable} from 'rxjs/Observable';
import { AuthService } from '../../services/auth/auth.service';
import {SELECT_DIRECTIVES} from 'ng2-select';

@Component({
selector: 'users-edit',
templateUrl: '../../app/components/user/user-edit.html',
directives: [SELECT_DIRECTIVES]
})
export class UserEditComponent implements OnInit{
private isAdmin: Boolean = false;
private _data: Observable private fname: string;
private id: number;
private lname: string;
private email: string;
private _roles: Observable public roles: any = [];
public groups: any = ['Group 1', 'Group 2', 'Group 3', 'Group 4', 'Group 5'];
private initRoleData: Array[]=[];
private _disabledV: string = '0';
private disabled: boolean = false;
private get disabledV(): string {
return this._disabledV;
}

private set disabledV(value: string) {
    this._disabledV = value;
    this.disabled = this._disabledV === '1';
}

public selected(value: any): void {
    console.log('Selected value is: ', value);
}

public removed(value: any): void {
    console.log('Removed value is: ', value);
}

public refreshValue(value: any): void {
    this.initRoleData = value;
}


constructor(private router: Router,
    private userService: UserService,
    private route: ActivatedRoute,
    private authService: AuthService) {

    this.isCurrentUserAdmin();
    this.route.params.subscribe(params => {
        this.id = +params['id'];
    });
}

private isCurrentUserAdmin() {
    this.userService.isCurrentUserAdmin(this.authService.getUserName())
        .subscribe(data => {
            this.isAdmin = Boolean(data);
        },
        error => {
            console.log("error while retriving admin");
            console.log(error);
            this.userService.handleError(error);
        });
}

ngOnInit() {
    this.userService.getUser(this.id)
        .subscribe(data => {
            this.fname = data.FirstName;
            this.lname = data.LastName;
            this.email = data.Email;
        });
    this.userService.getUserRolesById(this.id)
        .subscribe(data => {
            data.forEach(role => {
                this.initRoleData.push(role.Name);             
            });
        });
    console.log(this.initRoleData);
    this.userService.getAllRoles()
        .subscribe(data => {
            data.forEach(role => {
                this.roles.push(role.Name);
            });
        });
    console.log(this.roles);
}



Submit(form: any)
{
    alert(form);

}

}](url)`

Html

Edit User Account

        <fieldset>
            <section>
                <label class="input">
                    <i class="icon-append fa fa-user"></i>
                    <input type="text" name="username" placeholder="First Name" required [value]="fname">
                    <b class="tooltip tooltip-bottom-right">Enter First Name</b>
                </label>
            </section>

            <section>
                <label class="input">
                    <i class="icon-append fa fa-user"></i>
                    <input type="text" name="username" placeholder="Last Name" [value]="lname">
                    <b class="tooltip tooltip-bottom-right">Enter Last Name</b>
                </label>
            </section>

            <section>
                <label class="input">
                    <i class="icon-append fa fa-envelope"></i>
                    <input type="email" name="email" placeholder="Email address" [value]="email">
                    <b class="tooltip tooltip-bottom-right">Enter Email Address</b>
                </label>
            </section>

            <section>
                <label>
                    Roles
                </label>
                <div>
                    <ng-select [initData]="initRolesData"
                               [multiple]="true"
                               [items]="roles"
                               [disabled]="disabled"
                               (data)="refreshValue($event)"
                               (selected)="selected($event)"
                               (removed)="removed($event)"
                               placeholder="No roles assign">
                    </ng-select>
                </div>
            </section>

            <section>
                <label>
                    Groups
                </label>
                <div>
                    <ng-select 
                               [multiple]="true"
                               [items]="groups"
                               [disabled]="disabled"
                               (data)="refreshValue($event)"
                               (selected)="selected($event)"
                               (removed)="removed($event)"
                               placeholder="No groups assign">
                    </ng-select>
                </div>
            </section>
        </fieldset>
        <footer>
            <button type="reset" class="btn-u">Cancel</button>
            <button type="submit" class="btn-u" [disabled]="!userEdit.form.valid">Save</button>
        </footer>
    </form>
    <!-- End Reg-Form -->
</div>`

Source

AJMalik007

👍3

Most helpful comment

@AJMalik007 @monica11 I made it working with asynchronous data. Here are the steps:

We need a template variable on our select: <ng-select #select></ng-select>
Then import it into our Component class: @ViewChild('select') select;
Update #select.items after you get the data:

ngOnInit(){
    this.someService.getAsyncData().subscribe(response => {
        this.select.items = response.data; // and update our select items
    });
}

Hope it helps you too :)

DanielKucal on 24 Oct 2016

👍8 🎉4

All 11 comments

known issue .. see #97
really hope this is gonna be fixed soon.

bonaparte89 on 19 Sep 2016

replace [initData] with [active]. The Input was renamed https://github.com/valor-software/ng2-select/pull/223

GreenToast on 22 Sep 2016

👍1

@AJMalik007 Are you able to solve the problem? I am also facing the same. Would be great if you or anyone else could help me with this.

monica11 on 24 Sep 2016

Import SelectModule into your NgModule. SELECT_DIRECTIVES not needed anymore.

import {SelectModule} from 'ng2-select';
@NgModule({
    imports: [
        SelectModule
...

erik-ropez on 24 Sep 2016

@AJMalik007 @monica11 I made it working with asynchronous data. Here are the steps:

We need a template variable on our select: <ng-select #select></ng-select>
Then import it into our Component class: @ViewChild('select') select;
Update #select.items after you get the data:

ngOnInit(){
    this.someService.getAsyncData().subscribe(response => {
        this.select.items = response.data; // and update our select items
    });
}

Hope it helps you too :)

DanielKucal on 24 Oct 2016

👍8 🎉4

@DanielKucal Can you provide a full component example? When I am setting this.select.itemsand then check it in console.log, it comes back undefined. If I set the response to a variable, then log it out, I can see the data.

Solved: Make sure you remove items attribute from the <ng-select class="form-control" #select [items] = "items">

jasonspick on 10 Mar 2017

Try this.

this.userService.getAllRoles()
.subscribe(data => {
let roles_data = [];
data.forEach(role => {
roles_data .push(role.name);
});
this.roles = roles_data;
});
console.log(this.roles);