>

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

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

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

관련 자료

  • 이전 중첩 된 REGEX 캡처
  • 다음 python - TensorFlow에서 출력 예측을 얻는 방법