홈>2020-03-18 18:17

angular - formControlName에 할당 된 개체에 추가 속성을 추가하는 방법

같은 객체 배열로 응답을 받고 있습니다

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)에 채우고 옵션을 선택할 때 동일한 응답 형식을 얻습니다. 그러나 선택한 객체에 추가 된 추가 속성 '맞춤 속도'가 필요합니다. ~처럼

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 데모입니다. 데모

angularangular-reactive-formsangular-ngselect

답변 # 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;
  }
}

답변 # 2

customRate 속성을 taskList에 추가 할 수 있습니다.

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

Python2.net

angular - formControlName에 할당 된 개체에 추가 속성을 추가하는 방법

관련 자료