当我从api获取数据并将其转换为initData时,ng2-select不工作

Question

详情

我在表单中使用ng2-select.我从api检索数据并设置到数组但它无法正常工作.吼叫是我的代码.当我硬编码它工作正常.我不知道为什么这样做,可能是因为它在响应获取数据但没有将其设置为数组之后用空数据初始化数组.

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

<div class="row margin-bottom-40" style="margin-top:50px;">
    <div class="col-md-12">
        <!-- Reg-Form -->
        <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>
        <!-- End Reg-Form -->
    </div>

</div><!--/end row-->
<!-- JS Global Compulsory -->

Answer 1

github上有一个关于这个问题的问题.

找到的解决方法jkwiz是将您的选择包装在*ngIfdiv中,使您的选择被延迟,因为它只会在查询获取您的数据后创建:

    ...
    ...
           <section>
                <label>
                    Roles
                </label>
                <div *ngIf="roles.length > 0">
                    <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>
    ...
    ...

问题在于你不能在你的select dynamicaly中添加行,而且它似乎是一个问题ng2-select而且它不会立即修复我猜,因为问题有点旧,即使它是一个关键特性.