HarmonyOS 鸿蒙Next 两个嵌套的ForEach数据修改示例记录

原理：需要创建一个新的状态数组来代替旧数组，这样才能触发视图重建。

步骤：在toggleCheck方法中，首先创建了filtersData数组中指定元素的副本updatedItem，然后更新副本中的子列表项conditionVoList[ins].check状态。接下来，用包含更新后副本的新数组newArray替换原this.filtersData数组。

interface conditionVoList {
  key: string;
  value: string;
  check: boolean;
}

interface filtersData {
  key: string;
  value: string;
  conditionVoList: conditionVoList[]
}

@Entry
@Component
struct Index {
  @State filtersData: Array<filtersData> = [
    {
      key: '70', value: '1', conditionVoList: [
      { key: '81', value: '1-1', check: false },
      { key: '81', value: '1-2', check: false },
      { key: '81', value: '1-3', check: false },
    ]
    },
    {
      key: '71', value: '2', conditionVoList: [
      { key: '82', value: '2-1', check: false },
      { key: '82', value: '2-2', check: false },
    ]
    },
    {
      key: '72', value: '3', conditionVoList: [
      { key: '83', value: '3-1', check: false }
    ]
    },
    {
      key: '73', value: '4', conditionVoList: [
      { key: '84', value: '4-1', check: false }
    ]
    }
  ];

  build() {
    Row() {
      Column() {
        ForEach(this.filtersData, (item: filtersData, inx) => {
          Text(item.value)
          ForEach(item.conditionVoList, (its: conditionVoList, ins) => {
            Column() {
              Text(its.check ? its.value : 'mmm')
            }.onClick(() => {
              // this.filtersData[inx].conditionVoList[ins].check = !this.filtersData[inx].conditionVoList[ins].check;
              this.toggleCheck(inx, ins) // its.check = !its.check
              console.info(JSON.stringify(its))
            })
          })
        })
      }
      .width('100%')
    }
    .height('100%')
  }

  toggleCheck(inx: number, ins: number) {
    // 创建一个新的filtersData项目的副本
    const updatedItem: filtersData = {
      key: this.filtersData[inx].key,
      value: this.filtersData[inx].value,
      conditionVoList: [...this.filtersData[inx].conditionVoList],
    };

    // 更新子列表中的相应项
    updatedItem.conditionVoList[ins].check = !updatedItem.conditionVoList[ins].check;

    // 替换原始数组中的该项目
    const newArray = [...this.filtersData];
    newArray[inx] = updatedItem;
    this.filtersData = newArray;
  }
}

更多关于HarmonyOS 鸿蒙Next 两个嵌套的ForEach数据修改示例记录的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

htzhanglong 1楼•7 天前

在HarmonyOS鸿蒙Next中，使用两个嵌套的ForEach组件进行数据修改时，可以通过以下方式实现：

数据源定义：首先定义两个嵌套的数据源，例如outerList和innerList，分别用于外层和内层的ForEach组件。
外层ForEach：外层ForEach组件遍历outerList，每个外层项对应一个内层ForEach组件。
内层ForEach：内层ForEach组件遍历innerList，每个内层项可以独立修改。
数据修改：在ForEach组件的itemBuilder中，可以通过@State或@Link装饰器来管理数据状态，并在需要时进行数据修改。

示例代码如下：

@Entry
@Component
struct NestedForEachExample {
  @State outerList: Array<{ id: number, innerList: Array<{ id: number, value: string }> }> = [
    { id: 1, innerList: [{ id: 1, value: 'A' }, { id: 2, value: 'B' }] },
    { id: 2, innerList: [{ id: 3, value: 'C' }, { id: 4, value: 'D' }] }
  ];

  build() {
    Column() {
      ForEach(this.outerList, (outerItem) => {
        Column() {
          Text(`Outer Item ${outerItem.id}`)
          ForEach(outerItem.innerList, (innerItem) => {
            Text(`Inner Item ${innerItem.id}: ${innerItem.value}`)
              .onClick(() => {
                innerItem.value = 'Modified';
              })
          })
        }
      })
    }
  }
}

在这个示例中，点击内层Text组件时，会修改对应内层项的值。通过这种方式，可以在嵌套的ForEach组件中实现数据的动态修改。

更多关于HarmonyOS 鸿蒙Next 两个嵌套的ForEach数据修改示例记录的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

sinazl 2楼•7 天前作者

在HarmonyOS中，使用嵌套的ForEach组件时，数据修改需要谨慎处理。以下是一个示例，展示如何在嵌套的ForEach中修改数据：

@Entry
@Component
struct NestedForEachExample {
  @State outerList: Array<Array<number>> = [[1, 2], [3, 4]];

  build() {
    Column() {
      ForEach(this.outerList, (innerList, outerIndex) => {
        ForEach(innerList, (item, innerIndex) => {
          Text(`Item: ${item}`)
            .onClick(() => {
              // 修改数据
              this.outerList[outerIndex][innerIndex] += 1;
            })
        })
      })
    }
  }
}

在这个示例中，点击文本会修改对应位置的数据。注意，@State装饰器确保数据变化时UI自动更新。