Angular 2+ @ng-select/ng-select：如何更改键、值数组答案

【问题标题】：Angular 2+ @ng-select/ng-select: how to change key,value arrayAngular 2+ @ng-select/ng-select：如何更改键、值数组
【发布时间】：2021-04-22 19:01:45
【问题描述】：

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

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 组件。还可以通过按“添加”按钮添加更多 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}));
            });
      }

这张图片显示了如何在按下某些字符时获取应用列表：选择其中一个条目后，我希望该数组将被更新。在这种情况下使用“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。如何更改两个条目？

【问题讨论】：

我没有按照你所说的更新applicationUUID而不是applicationName的部分。您从哪里获得此信息 applicationUUID 和 applicationName。搜索必须在不同的组件中，如何设置通信，需要更多信息。

标签： angular angular-ngselect

【解决方案1】：

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

不绑定bouth、key和value

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

【讨论】：