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视图未更新。但是，当我单击第二次时，它将更新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

只需在视图侧使用async管道-

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

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

也无需在您的订阅中使用setTimeout。

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

您再次想起登录，不知道为什么需要登录！删除超时代码会使您一团糟。

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

        }

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

2 个答案: