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';
@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">
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<any[]>; private fname: string; private id: number; private lname: string; private email: string; private _roles: Observable<any[]>; 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;
}
}](url)`
Html
`
known issue .. see #97 really hope this is gonna be fixed soon.
replace [initData] with [active]. The Input was renamed https://github.com/valor-software/ng2-select/pull/223
@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.
Import SelectModule into your NgModule. SELECT_DIRECTIVES not needed anymore.
@AJMalik007 @monica11 I made it working with asynchronous data. Here are the steps:
<ng-select #select></ng-select>
@ViewChild('select') select;
Hope it helps you too :)
@DanielKucal Can you provide a full component example? When I am setting
this.select.items
and 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">
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);
Not working for me. Items array will be populated correctly, but the UI doesn't update. It updates only on focusout...
@dave0688 with
ChangeDetectionStrategy.OnPush
you may need to callChangeDetectorRef.detectChanges()
method after the data update.Hi. It was fixed in that fork: https://github.com/optimistex/ngx-select-ex
this.items = [...this.items, {id: 1, name: 'New item'}];
this works 101%