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
      })
    })
}

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

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

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

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

HarmonyOS
2025-01-09 15:34:34
浏览
收藏 0
回答 1
待解决
回答 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%')
  }
}
分享
微博
QQ
微信
回复
2025-01-09 17:40:46
相关问题
Canvas绘制内容如何动态更新
2250浏览 • 1回复 待解决
HarmonyOS @build组件参数据没有刷新
381浏览 • 1回复 待解决
HarmonyOS关于AXIOS动态参数问题
1006浏览 • 1回复 待解决
HarmonyOS router获取不到参数
251浏览 • 1回复 待解决
HarmonyOS navigation跳转参数获取
251浏览 • 1回复 待解决
函数内容没法toast!!!
7607浏览 • 3回复 待解决
HarmonyOS 组件接收页面参数
485浏览 • 1回复 待解决
OpenHarmony startAbility 如何获取参数
8672浏览 • 0回复 待解决
HarmonyOS web组件参数传递报错
426浏览 • 1回复 待解决
HarmonyOS 组件初始化参数
308浏览 • 1回复 待解决
HarmonyOS Web组件头部参数问题
386浏览 • 1回复 待解决
HarmonyOS 怎么把组件作为参数传递
448浏览 • 1回复 待解决