HarmonyOS LazyForEach无法检测数据源的变化进行重新渲染

假设源数据源为：ABABAABB

现在需要过滤单独为A或B进行展示，需要更换数据源

已经更换了数据源，并调用了notifyDataReload方法，但是页面上LazyForEach中数据依旧不更新。

代码处理流程

1.实现IDataSource接口

export class CommonDataSource<T> implements IDataSource {
  private dataArray: T[] = [];
  private listeners: DataChangeListener[] = [];

  constructor(element: T[]) {
    this.dataArray = element;
  }

  public getData(index: number) {
    return this.dataArray[index]
  }

  public totalCount(): number {
    return this.dataArray.length;
  }

  public addData(index: number, data: T[]): void {
    this.dataArray = this.dataArray.concat(data);
    this.notifyDataAdd(index);
  }

  public pushData(data: T): void {
    this.dataArray.push(data);
    this.notifyDataAdd(this.dataArray.length - 1);
  }

  unregisterDataChangeListener(listener: DataChangeListener): void {
    const pos = this.listeners.indexOf(listener);
    if (pos >= 0) {
      this.listeners.splice(pos, 1);
    }
  }

  registerDataChangeListener(listener: DataChangeListener): void {
    if (this.listeners.indexOf(listener) < 0) {
      this.listeners.push(listener);
    }
  }

  notifyDataReload(): void {
    this.listeners.forEach((listener: DataChangeListener) => {
      listener.onDataReloaded();
    })
  }

  notifyDataAdd(index: number): void {
    this.listeners.forEach((listener: DataChangeListener) => {
      listener.onDataAdd(index);
    })
  }

  notifyDataChange(index: number): void {
    this.listeners.forEach((listener: DataChangeListener) => {
      listener.onDataChange(index);
    })
  }

  notifyDataDelete(index: number): void {
    this.listeners.forEach((listener: DataChangeListener) => {
      listener.onDataDelete(index);
    })
  }

  notifyDataMove(from: number, to: number): void {
    this.listeners.forEach((listener: DataChangeListener) => {
      listener.onDataMove(from, to);
    })
  }

  modifyAllData(element: T[]): void{
    this.dataArray = element
    this.notifyDataReload()
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.

2.定义数据源数据

@State messages: Array<Message> = []
@State filterMessages: Array<Message> = []
@Watch('onFilterIndexChange')@State filterIndex: number = 0; // 用来监听选择的条件，比如0表示全选，1表示筛选A 2表示筛选B
1.
2.
3.

3.源数据源列表展示

List({ space: 10 }) {
  LazyForEach(this.data, (item: Message) => {
    ListItem() {
      this.MessageItem(item)
    }
  })
}
.scrollBar(BarState.Off)
.cachedCount(4)

@Builder
MessageItem(item: Message) {}  
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

4.更换数据源

onFilterIndexChange(){
  // AlertDialog.show({message: `${this.filterIndex}`})
  if (this.filterIndex === 0) {
    this.data?.modifyAllData(this.messages)
  }else if(this.filterIndex === 1){
    this.filterMessages = this.messages.filter((message : Message) => message.type === MessageType.HumanoidDetection)
    this.data?.modifyAllData(this.filterMessages)
  }else {
    this.filterMessages = this.messages.filter((message : Message) => message.type === MessageType.MotionDetection)
    this.data?.modifyAllData(this.filterMessages)
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.