Question

使用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项目。我从服务器收到一个包含上述对象的数组（实际上是同一个实体，因此它们以相同的方式序列化）

关注this doc和this one我尝试使用两者，因此我添加了一些额外的序列化字段（ummaped）并得到了上面的json（text = name = numero，id = value）。问题是根本没有工作，每次我选择时都会从ng-select.js中得到这个错误：

装订对象（{ “ID”：2 “NUMERO”： “dfdhdf”， “尺寸”：324234 “tipoContenedor”： “324324”， “contenedorEmbarques”：[]， “文本”： “dfdhdf”， “姓名”： “dfdhdf”， “值”：2 “createdAt”： “2018-03-26T12：44：48-04：00”， “updatedAt”： “2018-03-26T12：44：48-04：00”} ）不允许使用bindValue。

对象具有相同且必需的属性但仍不起作用

有任何帮助吗？

Answer 1

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

    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）] =＆＃34; embarqueContenedor.contenedor＆＃34;

正在弄乱它，因为ngModel指的是一个对象而不是每id bindValue。

尝试：

[(ngModel)]="embarqueContenedor?.contenedor?.id"

Answer 2

将ngModel与ng-select结合使用时，您必须传递所选值的ID，如以下示例所示：

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

以及ID的多次选择传递数组。

Answer 3

我有一个更简单的例子，带有这种格式的对象数组

{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]; 所以在上面的答案中非常重要：要获得默认选择，您需要添加属性而不是整个对象。它对我有用，但你的例子显然更复杂......

如何将加载的数据正确绑定到@ ng-select，angular5

3 个答案: