如何在分配给窗体控件名称的对象中添加其他属性

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

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

}

这是堆栈闪电战演示：演示

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

Answer 2

可以将 customRate 属性追加到 taskList。

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