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

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>

尽管它现在确实可以正确呈现下拉菜单，但项目无法select。在 DOM 检查器中查看源代码时，似乎每个选项上的样式属性都会 disappear/reappear （就像它正在重新初始化函数被一遍又一遍地触发一样。）

函数创建是否正确？

Answer 1

与其直接在模板中分配 [options]="format(obj.tags)"，这可能会导致该方法在每个更改检测周期触发，您应该将 format() 方法的 return 值分配给另一个方法'property' 在您的组件中并在模板中使用属性。

假设您的 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 简单字符串数组的问题

basvandenberg/ng-select issue with simple string array

angular-ngselect

angular

angular5