ng2-select
ng2-select copied to clipboard
valor-software
ng2-select not working when I get data from api and cast it in initData
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 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
`
<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>`
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.
import {SelectModule} from 'ng2-select';
@NgModule({
imports: [
SelectModule
...
@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 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">
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 call ChangeDetectorRef.detectChanges() method after the data update.
Hi. It was fixed in that fork: https://github.com/optimistex/ngx-select-ex
