如何在分配给 formControlName 的对象中添加额外的 属性

Question

我收到的响应是像

这样的对象数组

taskList = [
{ 'clientTaskId' : '1', 'taskName': 'hardware setup', billableRate: '500'},
{ 'clientTaskId' : '2', 'taskName': 'software installation', billableRate: '250'},
{ 'clientTaskId' : '3', 'taskName': 'environment setup', billableRate: '700'},
{ 'clientTaskId' : '4', 'taskName': 'cafeteria setup', billableRate: '1200'},
];

我将此响应填充到 ng-select (multiselect)，然后当我 select 选项时，我得到相同的响应格式。 但是我需要在 selected 对象中添加一个额外的 属性 'custom rate'。喜欢

taskList = [
    { 'clientTaskId' : '1', 'taskName': 'hardware setup', billableRate: '500', customRate: ''},
    { 'clientTaskId' : '2', 'taskName': 'software installation', billableRate: '250', customRate: ''},
    { 'clientTaskId' : '3', 'taskName': 'environment setup', billableRate: '700', customRate: ''},
    { 'clientTaskId' : '4', 'taskName': 'cafeteria setup', billableRate: '1200', customRate: ''},
    ];

我该如何实现，是否可以通过为变量分配预定义接口的概念来实现？或者通过循环和映射 selected 值并将 customRate 属性 附加到它。

这是我的代码：

import {Component, NgModule, ViewChild} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {FormControl, FormGroup, ReactiveFormsModule, FormsModule, FormBuilder,Validators} from '@angular/forms';
import {NgSelectModule, NgOption} from '@ng-select/ng-select';

@Component({
    selector: 'my-app',
    template: `
        <form (submit)="onClientSave()" [formGroup]="clientForm">
          <ng-select 
                      placeholder="Select custom rates"
                      [items]="taskList"
                      [multiple]="true"
                      bindLabel="taskName"
                      [addTag]="true"
                      [closeOnSelect]="false"
                      clearAllText="Clear"
                      formControlName = "custom"
                      >
                    </ng-select>
        </form>
        <br>
        <pre> {{clientForm.value | json}}</pre>
    `
})
export class AppComponent {

  taskList = [
    { 'clientTaskId' : '1', 'taskName': 'hardware setup', billableRate: '500'},
    { 'clientTaskId' : '2', 'taskName': 'software installation', billableRate: '250'},
    { 'clientTaskId' : '3', 'taskName': 'environment setup', billableRate: '700'},
    { 'clientTaskId' : '4', 'taskName': 'cafeteria setup', billableRate: '1200'},
  ];

   clientForm = this.fb.group({
      custom : [''],
    });

  constructor(
    private fb : FormBuilder
  ){}


}

这是 stackblitz 演示：demo

Answer 1

您可以将 customRate 属性 附加到 taskList。

this.taskList.map( task => {
           task["customRate"]=0;
        });

Answer 2

类似下面的方法可能会起作用。订阅 (add) 和 (remove) 事件。我以前从未使用过 ng-select ，所以我不确定向事件发送了哪些数据。 Here's the code though.

@Component({
    selector: 'my-app',
    template: `
        <form (submit)="onClientSave()" [formGroup]="clientForm">
          <ng-select 
                      placeholder="Select custom rates"
                      [items]="taskList"
                      [multiple]="true"
                      bindLabel="taskName"
                      [addTag]="true"
                      [closeOnSelect]="false"
                      clearAllText="Clear"
                      (add)="addCustomRate($event)"
                      (remove)="removeCustomRate($event)"
                      formControlName = "custom">
            </ng-select>
        </form>
        <br>
        <pre> {{clientForm.value | json}}</pre>
    `
})
export class AppComponent {

  taskList = [
    { 
      clientTaskId: 1, 
      taskName: 'hardware setup', 
      billableRate: 500 
    },
    { 
      clientTaskId: 2, 
      taskName: 'software installation', 
      billableRate: 250 
    },
  ];
  clientForm = this.fb.group({
    custom : [''],
  });


  constructor(
    private fb : FormBuilder
  ){}


  addCustomRate(item: any): void {
    item.customRate = "";
  }

  removeCustomRate(item: any): void {
    delete item.customRate;
  }

}