0

我正在使用以下 ng-select 模块，但在使用简单数组时遇到了问题。

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

它期望的选项格式是一个对象数组：

{
   value: string;
   label: string;
}

但是我没有提供数据的选项。

我的对象：

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

在我的 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 检查器的源代码时，似乎每个选项上的样式属性都会消失/重新出现（就像它正在重新初始化并一遍又一遍地触发函数一样。）

函数创建是否正确？

4

1 回答 1

1

与其[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>
于 2017-12-22T03:33:08.100 回答