Angular 2+ @ng-select/ng-select: 如何改变键值数组

Question

假设我们有以下输入数据：

TS:

@Input() data: any[];

内容：

   [
      {
        "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>

每个键，值将呈现一个 ng-select 组件。在这种情况下，我们有 2 个 ng-select 组件。也可以通过按“ADD”按钮添加更多 ng-select。这将添加一个空的 key.value，如下所示：

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

还有一个新的 nd-select 组件。要填充一些值，可以在新的 ng-select 组件中键入一些字符。这会触发获取应用程序列表的请求。

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}));
            });
      }

此图显示了如何在按下某些字符时获取应用程序列表：在 selecting 其中一个条目之后，我希望数组将被更新。在这种情况下使用“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"
      }
    ]

但这只会更新应用程序 UUID。如何更改两个条目？

Answer 1

所以我终于找到了解决方案。

不绑定键和值

更改 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>

Angular 2+ @ng-select/ng-select: 如何改变键值数组

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

angular-ngselect

angular