0

我得到一个响应作为一个对象数组，比如

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（多选），然后当我选择选项时，我得到相同的响应格式。但我需要在所选对象中添加一个附加属性“自定义费率”。喜欢

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: ''},
    ];

我该如何实现这一点，是否可以通过为变量分配预定义接口的概念来实现这一点？或者通过循环和映射选定的值并将 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

4

2 回答 2

1

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

this.taskList.map( task => {
           task["customRate"]=0;
        });
于 2018-08-18T20:38:57.123 回答
1

像下面这样的东西可能会起作用。订阅(add)和(remove)事件。我以前从未使用过 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"
                      (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;
  }

}
于 2018-08-18T20:39:17.830 回答