ngFor Array无法更新DOM视图角度5。第二次单击时更新dom

Question

I am getting contacts list using contact api.

contacts = new Array<Object>();
public signIn() {
    this.getContacts().then((res)=>{
        console.log("res",res);
        this.contacts =res;
    })
}

and here is my html

<button (click)="signIn()">Import google contacts</button>
<div *ngFor="let contact of contacts">
    {{contact}}
</div>

The problem is when I click sign in button on first time, the html DOM View is not updated. But when I click 2nd time, then it DOM html view is updated. I want it to be updated on first time. Can anybody help?

Here is my getContact function. I am using jquery inside.

public getContacts():any {
    let config = {
        'client_id': 'xxxx',
        'scope': 'https://www.google.com/m8/feeds'
    };
    return new Promise(resolve=>{
        gapi.auth.authorize(config, ()=> {                
            $.ajax({
                url: 'https://www.google.com/m8/feeds/contacts/default/full?alt=json&max-results=100',
                dataType: 'jsonp',
                data: gapi.auth.getToken()
            }).done(function(data) {
                resolve(data.feed.entry);

            });
        });
    })
  }

The response I am getting in first time. Following is the screenshot.

Answer 1

Just use async pipe in the view side like this -

<button (click)="signIn()">Import google contacts</button>
<div *ngFor="let contact of contacts | async">
         {{contact}}
</div>

public signIn() {
        this.contacts = this.getContacts();
    }

Also No need to use setTimeout within your subscription.

Answer 2

contacts =new   Array<Object>();
    public signIn() {

 this is an async request.So, this.contacts populates after you get result from this.getContacts() 

        this.getContacts().then((res)=>{
            console.log("res",res);
            this.contacts =res;
            setTimeout(()=>{

You are recalling the signIn again, don't know why it is required! Removing timeout code should bring you out of mess.

 this.contacts =res;
                    this.signIn();
                },2000);
                this.flag =1;
            })

        }