Angular 2+ @ng-select/ng-select: how to change key,value array

Question

Lets say we have following incomming data:

TS:

@Input() data: any[];

CONTENT:

   [
      {
        "applicationUUID": "584DFE9F-1A3D-4369-83CA-B1D594C34700",
        "applicationName": "APP1"
      },
      {
        "applicationUUID": "A925EE97-166F-4a11-B830-6512479C092E,
        "applicationName": "APP2"
      }
    ]

HTML:

   <div *ngFor="let item of data; let i=index">
      <ng-select #ngSelectComponent
        [items]="e2eUnmonitoredApplications"
        bindLabel="applicationName"
        bindValue="applicationUUID"
        [multiple]="false"
        id="{{newUUID}}_{{i}}"
        (search)="onSelect($event)"
        [(ngModel)]="item.applicationUUID">
      </ng-select>
    </div>

each key, value will present an ng-select component. In this case we have 2 ng-select components. There is also apossibility to add some more ng-select by pressing an "ADD" button. This will add an empty key.value like this:

  [
      {
        "applicationUUID": "584DFE9F-1A3D-4369-83CA-B1D594C34700",
        "applicationName": "APP1"
      },
      {
        "applicationUUID": "A925EE97-166F-4a11-B830-6512479C092E",
        "applicationName": "APP2"
      },
      {
        "applicationUUID": "",
        "applicationName": ""
      }
    ]

and also an new nd-select component. To fill some values, its possible to type some characters in the new ng-select component. This triggers a request to get a list of apps.

HTML:

(search)="onSelect($event)"

TS:

 onSelect(event: any) {
    this.sar.getApplications(event.term)
            .subscribe((data) => {
              this.clearList();
              this.apps = Object.entries(data).map(([applicationName, applicationUUID]) => ({applicationUUID, applicationName}));
            });
      }

this picture shows how the get a list of apps on press some characters: after selecting one of the entries, I expect that the array will be updated. In this case with "eOrder".

 [
      {
        "applicationUUID": "584DFE9F-1A3D-4369-83CA-B1D594C34700",
        "applicationName": "APP1"
      },
      {
        "applicationUUID": "A925EE97-166F-4a11-B830-6512479C092E",
        "applicationName": "APP2"
      },
      {
        "applicationUUID": "A925EE97-166F-4a11-B830-6512479C092D",
        "applicationName": "eOrder"
      }
    ]

but this will just update the applicationUUID. How to change both entries?

Answer 1

so finaly I get the solution.

• not binding bouth, key and value

• change ngModel

       <ng-select #ngSelectComponent
                  [items]="e2eUnmonitoredApplications"
                  bindLabel="applicationName"
                  [multiple]="false"
                  [virtualScroll]="true"
                  appendTo="body"
                  style="min-width: 300px;"
                  name="unintApp_{{newUUID}}_{{i}}"
                  id="{{newUUID}}_{{i}}"
                  [clearable]="false"
                  (close)="onClose()"
                  (search)="onSelect($event)"
                  [(ngModel)]="data[i]"
                  placeholder="">
       </ng-select>