Question

我使用以下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检查器的源时，似乎每个选项的样式属性将消失/重新出现（就像它重新初始化时，一次又一次地触发该函数。）

是否正确创建了该功能？

Answer 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>

basvandenberg / ng-select简单字符串数组的问题

1 个答案: