Expression has changed after it was checked
<h2>Details</h2>

<p>I am trying to implement ng2-select in form there are two issue first it shows this error because i using table in which users are shown when click on username it redirect to another component and show that specific users data like email, roles and group when I will go back and select other data it shows this error.</p>

<blockquote>
  <p>Expression has changed after it was checked.
  <a href="https://i.stack.imgur.com/9P6VJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9P6VJ.png" alt="Image"></a></p>
</blockquote>

<p>another issue is this I am using 2 ng2-select in same form and both of this show same initData </p>

<h2>code Typescript</h2>

<pre><code>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&lt;any[]&gt;;
    private fname: string;
    private id: number;
    private lname: string;
    private email: string;
    private _roles: Observable&lt;any[]&gt;;
    public roles: any = [];
    public groups: any = [];
    private initRoleData: Array&lt;any&gt;[] = []; 
    private initGroupData: Array&lt;any&gt;[] = [];


    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 =&gt; {
            this.id = +params['id'];
        });
    }

    private isCurrentUserAdmin() {
        this.userService.isCurrentUserAdmin(this.authService.getUserName())
            .subscribe(data =&gt; {
                this.isAdmin = Boolean(data);
            },
            error =&gt; {
                console.log("error while retriving admin");
                console.log(error);
                this.userService.handleError(error);
            });
    }

    ngOnInit() {

        this.userService.getUser(this.id)
            .subscribe(data =&gt; {
                this.fname = data.FirstName;
                this.lname = data.LastName;
                this.email = data.Email;
            });

        this.userService.getUserRolesById(this.id)
            .subscribe(data =&gt; {
                data.forEach(role =&gt; {
                    this.initRoleData.push(role.Name);
                });
            });

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

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

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

    }



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

    }

}
</code></pre>

<h2>html</h2>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="row margin-bottom-40" style="margin-top:50px;"&gt;
    &lt;div class="col-md-12"&gt;
        &lt;!-- Reg-Form --&gt;
        &lt;form id="sky-form4" class="sky-form" (ngSubmit)="Submit(userEdit)" #userEdit="ngForm"&gt;
            &lt;header&gt;Edit User Account&lt;/header&gt;

            &lt;fieldset&gt;
                &lt;section&gt;
                    &lt;label class="input"&gt;
                        &lt;i class="icon-append fa fa-user"&gt;&lt;/i&gt;
                        &lt;input type="text" name="username" placeholder="First Name" required [value]="fname"&gt;
                        &lt;b class="tooltip tooltip-bottom-right"&gt;Enter First Name&lt;/b&gt;
                    &lt;/label&gt;
                &lt;/section&gt;

                &lt;section&gt;
                    &lt;label class="input"&gt;
                        &lt;i class="icon-append fa fa-user"&gt;&lt;/i&gt;
                        &lt;input type="text" name="username" placeholder="Last Name" [value]="lname"&gt;
                        &lt;b class="tooltip tooltip-bottom-right"&gt;Enter Last Name&lt;/b&gt;
                    &lt;/label&gt;
                &lt;/section&gt;

                &lt;section&gt;
                    &lt;label class="input"&gt;
                        &lt;i class="icon-append fa fa-envelope"&gt;&lt;/i&gt;
                        &lt;input type="email" name="email" placeholder="Email address" [value]="email"&gt;
                        &lt;b class="tooltip tooltip-bottom-right"&gt;Enter Email Address&lt;/b&gt;
                    &lt;/label&gt;
                &lt;/section&gt;

                &lt;section&gt;
                    &lt;label&gt;
                        Roles
                    &lt;/label&gt;
                    &lt;div *ngIf="roles.length &gt; 0"&gt;
                        &lt;ng-select [initData]="initRoleData"
                                   [multiple]="true"
                                   [items]="roles"
                                   (data)="refreshValue($event)"
                                   (selected)="selected($event)"
                                   (removed)="removed($event)"
                                   placeholder="No roles assign"&gt;
                        &lt;/ng-select&gt;
                    &lt;/div&gt;
                &lt;/section&gt;
                
                &lt;section&gt;
                    &lt;label&gt;
                        Groups
                    &lt;/label&gt;
                    &lt;div *ngIf="groups.length &gt; 0"&gt;
                        &lt;ng-select [initData]="initGroupData"
                                   [multiple]="true"
                                   [items]="groups"
                                   (data)="refreshValue($event)"
                                   (selected)="selected($event)"
                                   (removed)="removed($event)"
                                   placeholder="No groups assign"&gt;
                        &lt;/ng-select&gt;
                    &lt;/div&gt;
                &lt;/section&gt;
            &lt;/fieldset&gt;
            &lt;footer&gt;
                &lt;button type="reset" class="btn-u"&gt;Cancel&lt;/button&gt;
                &lt;button type="submit" class="btn-u" [disabled]="!userEdit.form.valid"&gt;Save&lt;/button&gt;
            &lt;/footer&gt;
        &lt;/form&gt;
        &lt;!-- End Reg-Form --&gt;
    &lt;/div&gt;

&lt;/div&gt;&lt;!--/end row--&gt;</code></pre>
</div>
</div>
</p>