HarmonyOS 数组中嵌套对象的属性值发生变化，@Watch监听不到数组的变化，这个要怎么办

代码如下：

@Observed
class ProductModel{
  name:string = ''
  count:number = 0
}
@Entry
@Component
struct ProductListView {
  showTitle:boolean = false;
  jsonString:string = '[{"name":"商品1", "count":"1"},{"name":"商品2", "count":"1"},{"name":"商品3", "count":"1"}]'
  @State @Watch('productListChanged') productList: ProductModel[] = [];
  productListChanged(){
    this.showTitle = !this.showTitle;
  }
  aboutToAppear(): void {
    this.productList = JSON.parse(this.jsonString);
    let list: ProductModel[] = [];
    for (const element of this.productList) {
      let product: ProductModel = new ProductModel();
      product.name = element.name;
      product.count = element.count;
      list.push(product);
    }
    this.productList = list;
  }
  build() {
    Column({space:10}){
      if(this.showTitle){
        Text('标题')
      }
      ForEach(this.productList,(item:ProductModel)=>{
        Column(){
          Text('这里无法刷新__'+`${item.count}`)//此处无法刷新，该怎么解决？
          ProductView({item:item, countChanged:(product)=>{
            //productList数组中嵌套对象item的属性值发生变化，监听不到数组的变化，无法触发productListChanged()方法
          }})
        }
      })
    }.padding(20)
  }
}
@Component
struct ProductView {
  @ObjectLink item: ProductModel;
  countChanged: (item:ProductModel)=>void = ()=>{};
  build() {
    Row(){
      Text(this.item.name)
      Text(`${this.item.count}`)
      Button('数量-1').onClick(()=>{
        this.item.count--
        if (this.countChanged !== undefined) {
          this.countChanged(this.item);
        }
      })
      Button('数量+1').onClick(()=>{
        this.item.count++
        if (this.countChanged !== undefined) {
          this.countChanged(this.item);
        }
      })
    }.width('100%').justifyContent(FlexAlign.SpaceBetween)
  }
}

数组中嵌套对象的属性值发生变化，@Watch监听不到数组的变化，这个要怎么办？

HarmonyOS

Heiang

2024-12-26 14:19:03

浏览

回答 1

待解决

回答 1

按赞同

按时间

superinsect

参考示例：

import { plainToClass, ClassConstructor } from "class-transformer"
import { BusinessError, request } from '@kit.BasicServicesKit';
@Observed
class ProductModel{
  name: string = ''
  count: number = 0;
}
@Entry
@Component
struct ProductListView {
  //todo 1 父组件同步子组件needFreshCount值变化，在监听事件中增加业务逻辑处理
  @State@Watch('productListChanged') needFreshCount:number = 0;
  @State needFreshCount2:number = 0;
  jsonString:string = '[{"name":"商品1", "count":"1"},{"name":"商品2", "count":"1"},{"name":"商品3", "count":"1"}]'
  @State productList: ProductModel[] = [];
  productListChanged(){
    this.needFreshCount2++;
  }
  aboutToAppear(): void {
    this.productList = jsonToArray(ProductModel, this.jsonString);
  }
  build() {
    Column({space:10}){
      Text('父组件这里没有刷新/或只刷新一次__'+`${this.needFreshCount2}`)
      ForEach(this.productList,(item:ProductModel, index: number)=>{
        Column(){
          //todo 2 Watch监听不到数组中对象属性值变化，needFreshCount
          ProductView({item:item,needFreshCount:this.needFreshCount, countChanged:(product)=>{
          }})
        }
      })
      Child2({needFreshCount:this.needFreshCount,productList:this.productList}).margin({top:50});
    }.padding(20)
  }
}
@Component
struct ProductView {
  @ObjectLink@Watch('productChanged') item: ProductModel;
  @Link needFreshCount:number;
  productChanged(){
    //todo 3 监听productList 数组中某个对象属性值发生变化，与父组件绑定一个变量needFreshCount，在父组件中监听needFreshCount变化
    this.needFreshCount++;
  }
  countChanged: (item:ProductModel)=>void = ()=>{};
  build() {
    Row(){
      Text(this.item.name)
      Text(`${this.item.count}`)
      Button('数量-1').onClick(()=>{
        this.item.count--
        if (this.countChanged !== undefined) {
          this.countChanged(this.item);
        }
      })
      Button('数量+1').onClick(()=>{
        this.item.count++
        if (this.countChanged !== undefined) {
          this.countChanged(this.item);
        }
      })
    }.width('100%').justifyContent(FlexAlign.SpaceBetween)
  }
}
@Component
struct Child2 {
  @Link@Watch('productChanged') needFreshCount:number;
  @State childNeedFreshCount:number = 0;
  @Prop productList: ProductModel[];
  productChanged(){
    //todo 4 监听 needFreshCount，同步父组件变化
    this.childNeedFreshCount++;
  }
  build() {
    Column(){
      Text('第二个子组件,要监听父组件productList数组的变化')
      Text('子组件这里也没有刷新/或只刷新一次__'+`${this.childNeedFreshCount}`)
    }
  }
}
function jsonToArray<T>(cls: ClassConstructor<T>, jsonStr: string): Array<T> {
  try {
    return plainToClass(cls, JSON.parse(jsonStr), { enableImplicitConversion: false, exposeDefaultValues: true }) as Array<T>
  } catch (err) {
    let error = err as BusinessError;
    return []
  }
}

2024-12-26 16:40:59

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS 数组中嵌套对象的属性值发生变化，@Watch监听不到数组的变化，这个要怎么办

订阅鸿蒙技术特刊，精选内容抢先看