代码之家 › 专栏 › 技术社区 › kisonay

简单字符串数组的basvandenberg/ng选择问题

angular-ngselect angular5 angular

kisonay · 技术社区 · 7 年前

我正在使用以下ng select模块,但在使用简单阵列时遇到问题。

https://github.com/basvandenberg/ng-select

它需要的选项格式是对象数组:

{
   value: string;
   label: string;
}

但在提供数据的情况下,我没有这个选择。

我的对象:

{
    name: "something",
    tags: ["option1","option2","option3"],
    tagPrimary: "",
    ...
}

在my Angular5组件模板中:

<ng-select
      placeholder="Select a primary option..."
      [(ngModel)]="obj.tagPrimary"
      [options]="obj.tags">
</ng-select>

现在使用此选项时,生成的下拉列表有3个选项,但不显示任何内容,因为它正在查找具有标签键的对象。

我试图创建一个能够正确格式化数据的函数。

function format(tags){
    arr=[];
    _.each(tags,function(tag){
        obj.push({label: tag, value: tag});
    }
    return obj;
}

<ng-select
          placeholder="Select a primary option..."
          [(ngModel)]="obj.tagPrimary"
          [options]="format(obj.tags)">
</ng-select>

虽然它现在确实正确呈现下拉列表,但这些项目是不可选择的。在DOM检查器中查看源代码时,每个选项上的style属性似乎都会消失/重新出现(就像它正在重新初始化,函数会被反复触发一样)

函数创建是否正确?

1 回复 | 直到 7 年前

amal 7 年前

而不是分配 [options]="format(obj.tags)" 直接在模板中,这可能会导致方法在每个更改检测周期中触发,您应该为 format() 方法,并在模板中使用该属性。

假设你有 obj 在中提供 ngOnInit() (否则,您应在 obj公司 属性可用于组件中的值),

在您的组件中,

optionsForSelect: { label: string; value: string; }[]; // specifying the type, not necessary though, a type of 'any[]' would be sufficient

format(tags){
  arr=[];
  _.each(tags,function(tag){
      arr.push({label: tag, value: tag});
  }
  return arr;
}

ngOnInit() {
  //after you get 'obj' property
  this.optionsForSelect = this.format(this.obj.tags);
}

在模板中,

<ng-select
    placeholder="Select a primary option..."
    [(ngModel)]="obj.tagPrimary"
    [options]="optionsForSelect">
</ng-select>

推荐文章

Kiara · 根据条件角度显示多个模板

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Piotr Deja · 如何在subscribe方法中为参数赋值,然后从组件内部的任何位置检索该值?

1 年前

Ben5 · 服务器端总是接触FormControl

1 年前

allforthenoob · 我该怎么分类?

1 年前

Hamid Elouardaoui · 角度生成:发生未处理的异常:服务不再运行

1 年前

Hugh Jones · 如何创建适用于多个来源的自签名开发证书

1 年前

jthorn · 角度对象未在HTML中显示

1 年前

clem · 如何在Angular应用程序中突出显示页面的一部分?

1 年前

Kael · 在html表格中显示关系api数据-角度

2 年前