Angular变化检测 —— 数据更新时*ngFor 循环的html页面没有更新

场景：

        在ts文件中定义了一个数组array和一个function，其中function是用于向数组push数据的，在html中的页面中通过*ngFor循环数组array进行内容显示。但是当我在function中一条一条地push数据到数组array中的时候，html页面中的内容并没有更新或者实时更新，例如会出现push5，6条甚至更多数据之后在一起更新在页面上。其实归根结底，这就是change detection(变化检测)的问题。

        显然，这样的效果体验感十分不好，那如何解决这类问题呢？让我们一起来探索。

解决办法：

第一种：使用this.changeDetection.detectChanges()进行强制更新

代码示例：

//ts文件中
import ｛ChangeDetectorRef｝from '@angular/core'

constructor(private changeDetection:ChangeDetectorRef){}

//然后在需要进行强制更新的地方进行使用
this.changeDetection.detectChanges

第二种：为*ngFor表达式添加一个循环的下标

        这种方法就是给数组中的每一个数据提供一个唯一的ID，这能保证检测到数组数据的变化，从而改变html视图。

代码示例：

//html
*ngFor = "let item of (itemList$ | async); trackBy: trackItem"
或者
*ngFor = "let item of itemList; trackBy: trackItem"

//ts
public trackItem(index:number, item:Item) {
    return item.trackId
}

第三种：拿一个deep clone数组array的新数组去*ngFor循环

代码示例： 

//深克隆数组的方法

//使用lodash第三方工具
this.array = cloneDeep(this.array)
//使用map方法
this.array = this.array.map(el => object.assign({},el))
//使用扩展运算符
this.array = [...this.array]

第三种：behaviorSubject 和 async pip

        behaviorSubject 是一种很有效的解决change detection的方法。

代码示例：

//declare
array  = new BehaviorSubject([])

//Pass in new array data
this.array.next(nextArray)

//read array data
this.array.getValue()

//in html file
*ngFor = 'let obj of (array | async)