4

使用 angular 5 和@ng-select我发现了一些绑定到先前选择的数据的问题（在编辑表单中，例如）

ngselect 定义

 <ng-select
     [items]="contenedores$ | async"
     bindLabel="numero"
     bindValue="id"
     [(ngModel)]="embarqueContenedor.contenedor"> 
 </ng-select>

从 api 我以这种方式序列化实体：

从服务器接收（json）（这是来自模型）

{
    "id": 1,
    "numero": "dsvsd",
    "dimension": 234,
    "tipoContenedor": "324",
    "contenedorEmbarques": [],
    "text": "dsvsd",
    "value": 1,
    "name": "dsvsd",
    "createdAt": "2018-03-26T12:44:48-04:00",
    "updatedAt": "2018-03-26T12:44:48-04:00"
}

我也用这些项目填充 ngselect。我从服务器收到了一个包含上述对象的数组（实际上是同一个实体，因此它们以相同的方式序列化）

在这个文档和这个文档之后，我尝试同时使用它们，所以我添加了一些额外的序列化字段（ummaped）并得到了上面的 json（text=name=numero，id=value）。问题是它根本不起作用，每次我有一个选定的选择时，仍然从 ng-select.js 收到这个错误：

绑定对象({"id":2,"numero":"dfdhdf","dimension":324234,"tipoContenedor":"324324","contenedorEmbarques":[],"text":"dfdhdf","name" :"dfdhdf","value":2,"createdAt":"2018-03-26T12:44:48-04:00","updatedAt":"2018-03-26T12:44:48-04:00" }) 与 bindValue 是不允许的。

对象具有相同且必需的属性，但仍然无法正常工作

有什么帮助吗？

4

3 回答 3

2

这一行是他们验证您的支持值是否有效的方式：

    const validateBinding = (item: any): boolean => {
        if (isObject(item) && this.bindValue) {
            this._console.warn(`Binding object(${JSON.stringify(item)}) with bindValue is not allowed.`);
            return false;
        }
        return true;
    };

这就是您的错误的来源。我猜这一行：

[(ngModel)]="embarqueContenedor.contenedor"

搞砸了，因为ngModel指向一个对象而不是idper bindValue。

尝试：

[(ngModel)]="embarqueContenedor?.contenedor?.id"
于 2018-03-26T21:42:09.433 回答
2

将 ngModel 与 ng-select 一起使用时，您必须传递所选值的 id，如下例所示：

<ng-select [items]="countries"
       bindLabel="nested.name"
       bindValue="nested.countryId"
       placeholder="Select value"
       [(ngModel)]="selectedCountryId">
</ng-select>

以及用于多选传递的 id 数组。

于 2019-06-25T08:36:07.850 回答
0

我有一个更简单的示例，其中包含具有这种格式的对象数组

{name: 'en'}

ng-select 声明：

 <ng-select [items]="sourceLanguages"
                 [(ngModel)]="sourceSelection"
                 bindValue="name"
                 bindLabel="name"
                 [clearable]="false"
                 [searchable]="false"                  

      >

要在字符串数组上获得默认选择arr = ['en', 'fr', 'de']，我只需要输入this.sourceSelection = arr[1]；非常类似于上面的答案：要获得默认选择，您需要添加一个属性而不是整个对象。它对我有用，但你的例子显然更复杂......

于 2018-04-12T12:38:10.430 回答