ngFor Array не обновляет DOM view angular 5. Обновление dom при втором нажатии

Question

Я получаю список контактов, используя контактный API.

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

и вот мой HTML

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

Проблема в том, что при первом нажатии кнопки входа в систему HTML-представление DOM не обновляется. Но когда я нажимаю 2-й раз, то это DOM HTML-представление обновляется. Я хочу, чтобы это было обновлено в первый раз. Кто-нибудь может помочь?

Вот моя функция getContact. Я использую JQuery внутри.

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

            });
        });
    })
  }

Ответ, который я получаю в первый раз. Ниже приведен скриншот.

Answer 1

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(()=>{

Вы снова вспоминаете вход в систему, не знаете, почему это необходимо! Удаление кода тайм-аута должно вывести вас из беспорядка.

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

        }

Answer 2

Просто используйте async трубу со стороны вида вот так -

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

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

Также нет необходимости использовать setTimeout в вашей подписке.