HarmonyOS Select组件参数options参数动态获取，没法正常绘制数据内容

Select组件参数options数组Array<SelectOption>是从接口获取，使用@State修饰，无法展示出数组内容

实现方法

@State selectOption:SelectOption[] = new Array<SelectOption>()

Select(this.selectOption)
  .selected($$this.index)// 下拉菜单索引
  .font({ size: 16, weight: 500 })
  .optionWidth(70)
  .fontColor('#182431')
  .selectedOptionFont({ size: 16, weight: 400 })//设置下拉菜单选中项的文本样式
  .optionFont({ size: 16, weight: 400 })//设置下拉菜单项的文本样式
  .space(8)//设置下拉菜单项的文本样式
  .arrowPosition(ArrowPosition.END)//设置下拉菜单项的文本与箭头之间的对齐方式。
  .menuAlign(MenuAlignType.START, { dx: 0, dy: 0 })//设置下拉按钮与下拉菜单间的对齐方式。

aboutToAppear(){
  this.getLevelListResult()
}

getLevelListResult(){
  HttpStudy.getLevelList(this.aggregationPackage,
    (courseGroup:LevelListResult[])=>{
      this.selectOption=courseGroup.map(item=>{
        return {
          value: item.level
        } as SelectOption
      })
    })
}
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.

Select的下拉列表的数据没有展示。

直接在定义Select的时候写死数据，则可以展示

Select([{value:'one'}, {value:'two'}, {value: 'threee'}])
1.

有什么办法可以动态设置Array<SelectOption>数组内容呢？

HarmonyOS

Excelsior_abit

2025-01-09 15:34:34

浏览

回答 1

按赞同

按时间

put_get

可以定义一个Array<SelectOption>类型的数据，网数组中push类型为SelectOption的值，将数组作为Select的参数。

参考demo：

class Data{
  value: string
  icon: Resource

  constructor(value: string, icon: Resource) {
    this.value= value;
    this.icon= icon;
  }
}

// xxx.ets
@Entry
@Component
struct SelectExample {
  @State text: string = "下拉菜单展示"
  @State index: number = 2
  @State space: number = 8
  @State arrowPosition: ArrowPosition = ArrowPosition.END
  @State arr: Array<SelectOption> = [new Data('数据0',$r("app.media.startIcon"))];
  private  count:number =0;

  build() {
    Column({space: 20}) {
      Button('添加数据').onClick((event: ClickEvent) => {
        this.count++;
        this.arr.push(new Data('数据'+this.count,$r("app.media.startIcon")))
      })
      Select(this.arr)
        .selected(this.index)
        .value(this.text)
        .font({ size: 16, weight: 500 })
        .fontColor('#182431')
        .selectedOptionFont({ size: 16, weight: 400 })
        .optionFont({ size: 16, weight: 400 })
        .space(this.space)
        .arrowPosition(this.arrowPosition)
        .menuAlign(MenuAlignType.START, {dx:0, dy:0})
        .optionWidth(200)
        .optionHeight(300)
        .onSelect((index:number, text?: string | undefined)=>{
          console.info('Select:' + index)
          this.index = index;
          if(text){
            this.text = text;
          }
        })

    }.width('100%')
  }
}
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.

2025-01-09 17:40:46

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

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS Select组件参数options参数动态获取，没法正常绘制数据内容

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