检查后表达式发生了变化

Question

详细

我正在尝试在表单中实现ng2-select有两个问题首先它显示此错误，因为我使用的表在用户单击用户名时显示它重定向到另一个组件并显示特定用户数据，如电子邮件，角色当我回去并选择其他数据时它会显示此错误。

  

检查后表情发生了变化。   

另一个问题是我使用相同形式的2 ng2-select并且这两个显示相同的initData

代码Typescript

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 = [];
    private initRoleData: Array<any>[] = []; 
    private initGroupData: Array<any>[] = [];


    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);
                });
            });

        this.userService.getUserGroupsById(this.id)
            .subscribe(data => {
                data.forEach(group => {
                    this.initGroupData.push(group.Name);
                });
            });

        this.userService.getAllRoles()
            .subscribe(data => {
                data.forEach(role => {
                    this.roles.push(role.Name);
                });
            });

        this.userService.getAllGroups()
            .subscribe(data => {
                data.forEach(group => {
                    this.groups.push(group.Name);
                });
            });

    }



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

    }

}

HTML

＆＃13;

＆＃13;

<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 *ngIf="roles.length > 0">
                        <ng-select [initData]="initRoleData"
                                   [multiple]="true"
                                   [items]="roles"
                                   (data)="refreshValue($event)"
                                   (selected)="selected($event)"
                                   (removed)="removed($event)"
                                   placeholder="No roles assign">
                        </ng-select>
                    </div>
                </section>
                
                <section>
                    <label>
                        Groups
                    </label>
                    <div *ngIf="groups.length > 0">
                        <ng-select [initData]="initGroupData"
                                   [multiple]="true"
                                   [items]="groups"
                                   (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-->

＆＃13;

＆＃13;

＆＃13;

Answer 1

我通过从angular core添加ChangeDetectionStrategy来解决。 并且还添加了组件。

import {  Component, ChangeDetectionStrategy } from '@angular/core';
@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: 'page1',
  templateUrl: 'page1.html',
})