【问题标题】:Angular 2 *ngfor doesn't update with sequential http request responsesAngular 2 *ngfor 不会随着连续的 http 请求响应而更新
【发布时间】:2017-08-29 10:20:59
【问题描述】:

我有一个名为 rows 的空数组,我想用 *ngFor 显示它。在数组的每一行上,我传递来自 http 请求的响应。所有的http请求都是按顺序调用的。即使正确输入了数组,*ngFor 也永远不会更新。我想在收到请求响应时按顺序显示每一行。

<div class="row" >
    <my-rows 
       *ngFor="let row of rows | keys; trackBy: trackByFn; let index = index"
       [month]='row.value'
       [title]='row.key'>
    </my-rows>
</div>
getRerports(url: string, dates: any, id: any){
    let params = new URLSearchParams()
    params.set('company_id',id)
    params.set('date',dates[0])
    this.authHttp.get(this._getReportsUrl,{search:params})
        .subscribe(
            data=>{
                let formatedDate = moment(data.json().date,'YYYY-MM-DD').format('MMMM YYYY')
                this.rows[formatedDate] = data.json()
                dates.splice(0,1)
                this.flag = false
                if(dates.length>0){
                    this.getRerports(this._getReportsUrl,dates, id)
                }else{
                    this.flag=true
                }
            },
            err=> console.log(err)
        )
}

trackByFn(index:any, item:any) {
    return index;
}

【问题讨论】:

  • 更多代码,请。
  • 请发布您的http请求的详细信息。
  • @n00dl3 我已经添加了http请求
  • @Pengyy 我已经添加了 http 请求

标签: angularjs angular ngfor angularjs-track-by


【解决方案1】:

如果视图未更新,请使用 ChangeDetectorRef。

constructor(private ref: ChangeDetectorRef) 

更新数组时使用 this.ref.detectChanges()。

【讨论】:

  • 它似乎不起作用。我已经在数组更新下发布了它。
  • 您是否正确获取了数组中的值?如果只是视图没有更新,这应该可以。
  • 是的,数组已正确更新,所有请求均已成功完成。当我在外部 div 中使用带有 *ngIf 的标志变量时,我会一次获得所有行。问题是我想按顺序打印它们。
【解决方案2】:

我尝试改变将对象提供给 rows 数组的方式,而不是

this.rows[formatedDate] = data.json()

我用过这个:

let object = {key:formatedDate, value: data.json()}
                this.rows.push(object)

它似乎工作得很好。 所以问题出在数组初始化中。

【讨论】:

    猜你喜欢
    • 2018-02-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-07-11
    • 2019-04-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多