代码之家  ›  专栏  ›  技术社区  ›  m41n

更改检测未记录数据更改

  •  20
  • m41n  · 技术社区  · 7 年前

    主html:

    <div *ngFor="let item of data">
      <app-item [item]="item"></app-item>
    </div>
    
    <button (click)="addItem()">Add</button>
    

    项目html:

    <div>{{item.name}}</div>
    
    <button (click)="deleteItem()">Delete</button>
    

    在应用程序项目中,我显示了列表中的几个项目。列表通过http直接从数据库中获取数据。获取请求。

    现在,我还可以添加或删除两个都有效的项目(项目可以分别添加到数据库或从数据库中删除)。虽然更改检测不会拾取任何更改,但需要刷新站点(例如通过F5)以显示更改。

    我检查了代码(并非所有代码都来自我),但找不到任何指定的更改检测策略。

    我还尝试通过ChangeDetectorRef从添加和删除功能手动跳跳虎更改检测( this.ref.detectChanges(); 虽然这也没有消除手动刷新页面以查看更改的需要。

    现在,我错过了什么变化检测来提取这个?或者,我如何在添加/删除方法中手动触发它?

    2 回复  |  直到 7 年前
        1
  •  25
  •   Kamil Prathmesh Dali    5 年前

    由于要在现有阵列中添加或删除元素,angular无法拾取更改。

    为了让它发挥作用,你可以像

    • items= items.slice();
    • 或者你可以使用 Object.assign 方法as items= Object.assign([],items);

    要手动检测火灾变化,您可以按照答案进行操作 on this link

    ChangeDetectorRef detectChanges() 手动检测火灾变化的方法。

    constructure(private cd: ChangeDetectorRef) {}
    
    someMethod() {
        this.cd.detectChanges();
    }
    
        2
  •  11
  •   cpi    6 年前

    如果使用扩展运算符而不是推送,它应该可以工作。

    this.data = [...this.data, newItem];
    

    这是因为angular在整个对象更改或参考更改时检测到更改,因此变异不会触发它。因此,您需要使其成为一个新的数组,而不是对数组进行变异。