Issue with ng2-select and API Data Retrieval
I am encountering a problem while using ng2-select in my form. I am fetching data from an API and setting it into an array, but it is not functioning correctly. Below is the code snippet I am working with. When I hard code the data, everything works fine. However, when I dynamically retrieve the data from the API, it seems like the array is not being properly initialized. The response gets the data, but it is not being set to the array as expected.
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
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;
constructor(private router: Router,
private userService: UserService,
private route: ActivatedRoute,
private authService: AuthService) {
this.route.params.subscribe(params => {
this.id = +params['id'];
});
}
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);
}
}
HTML Form Section
<div class="row margin-bottom-40" style="margin-top:50px;">
<div class="col-md-12">
<form id="sky-form4" class="sky-form" (ngSubmit)="Submit(userEdit)" #userEdit="ngForm">
<header>Edit User Account</header>
<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
[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>
</div>
</div><!--/end row-->