Почему это не добавляет свойства внутри объекта? - PullRequest
Новая
       6

Почему это не добавляет свойства внутри объекта?

0 голосов
/ 27 февраля 2020

Мне нужно динамически вставить свойства внутри объекта "voci_agg", который находится внутри объекта "sm": sm = {voci_agg: {}};

Проблема в том, что когда я пытаюсь добавить, он будет return: Ошибка: Uncaught (в обещании): TypeError: Невозможно установить свойство 'm_motore-radiatore' из неопределенного TypeError: Невозможно установить свойство 'm_motore-radiatore' из неопределенного

(m_motore-radiatore извлекается из БД и добавляется динамически в "sm.voci_agg").

Это интересующий код:

schemamasse-comp.component. html

<tr *ngFor="let voce of voci; let i = index">
 <td class="align-middle">{{ voce.descrizione }}</td>
 <td>
  <input [(ngModel)]="sm.voci_agg[voce.m_model]" class="form-control" (keyup)="cal_m_utile($event)" type="number" step="any" min="0" name="{{ voce.m_model }}" id="{{ i }}"/>
 </td>
 <td>
  <input [(ngModel)]="sm.voci_agg[voce.d_model]" class="form-control" type="number" step="any" min="0" name="{{ voce.d_model }}" id="{{ i }}"/>
 </td>
 <td><a class="btn btn-danger btn-sm" (click)="del_voce($event)" id="{{ i }}"><i class="fas fa-minus"></i></a></td>
</tr>

schemamasse-comp.component.ts 

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { LocalStorageService } from 'ngx-webstorage';
import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { VociAggiuntive } from './vociaggiuntive.model';

// Modal "VOCI AGGIUNTIVE"
@Component({
  template: `
    <div class="modal-header">
      <h4 class="modal-title">Voci aggiuntive</h4>
      <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')"><span aria-hidden="true">&times;</span></button>
    </div>
    <div class="modal-body">
      <div class="row form-group text-center p-1 bg-dark text-white">
        <div class="col"><label for="descrizione"><h6>Descrizione</h6></label></div>
        <div class="col"><button class="btn btn-outline-success" (click)="submit_add_voce()">Aggiungi</button></div>
        <div class="col"><button class="btn btn-outline-primary" (click)="get_voci_aggiuntive()">Aggiorna</button></div>
        <div class="col"><button class="btn btn-outline-danger" (click)="submit_delete_voce()">Elimina</button></div>
      </div>
      <div *ngFor="let voce of voci_aggiuntive" class="row form-group text-center p-1">
        <div class="col btn-group btn-group-toggle"><label ngbButtonLabel class="btn-primary"><input ngbButton (change)="check_voce($event)" type="checkbox" value="{{ voce._id }}"/>{{ voce.descrizione }}</label></div>
        <div *ngIf="selected[voce._id] === true" class="col"><i class="fas fa-check fa-2x text-success"></i></div>
      </div>
    </div>
    <div class="modal-footer"><button class="btn btn-outline-primary" (click)="open()">Crea nuova voce</button></div>
    <div *ngIf="response === true" class="alert alert-success alert-dismissible fade show">
          <button type="button" class="close" data-dismiss="alert">&times;</button><strong>{{ message }}</strong>
    </div>
    <div *ngIf="response === false" class="alert alert-danger alert-dismissible fade show">
      <button type="button" class="close" data-dismiss="alert">&times;</button><strong>{{ message }}</strong>
    </div>
    `
})
export class VociAggiuntiveComponent{
  public voci_aggiuntive: VociAggiuntive[] = [];
  response; message; arr_check = []; selected = {};
  constructor(private http: HttpClient, private modalService: NgbModal, public activeModal: NgbActiveModal){
    this.get_voci_aggiuntive();
  }

  get_voci_aggiuntive(){
    this.http.get<VociAggiuntive[]>(`${origin}/api/get_voci_aggiuntive`).subscribe(res => { this.voci_aggiuntive = res });
  }
  check_voce(event){
    let i;
    if(event.target.checked === true){ this.arr_check.push(event.target.value); this.selected[event.target.value] = true; }
    else if (event.target.checked === false){
      for(i = 0; i < this.arr_check.length; i += 1){
        if(event.target.value === this.arr_check[i]){ this.arr_check.splice(i, 1); this.selected[event.target.value] = false; } 
      }
    }
  }
  open(){
    this.modalService.open(CreaNuovaVoceComponent, { backdrop: true, centered: true, scrollable: true, size: 'lg' });
  }
  submit_add_voce(){
    this.http.post<VociAggiuntive[]>(`${origin}/api/load_voci_aggiuntive`, this.arr_check).subscribe(res => { this.activeModal.close(res); });
  }
  submit_delete_voce(){
    let sinplu = this.arr_check.length;
    if(confirm('Sei sicuro di voler eliminare le voci selezionate? \n\n !!! ATTENZIONE !!! \nL\'operazione non è reversibile!')){
      this.http.post<VociAggiuntive[]>(`${origin}/api/delete_voci_aggiuntive`, this.arr_check)
      .subscribe(res => {
        if(sinplu < 2){ this.message = 'Voce aggiuntiva eliminata'; }
        else{ this.message = 'Voci aggiuntive eliminate'; }
        this.response = true;
        this.get_voci_aggiuntive();
        setTimeout (() => {
          this.response = undefined;
        }, 2000);
      }, err => {
        console.log(err);
        this.response = false;
        this.message = 'Errore Server Interno';
      });
    }
  }
}

// Main component
@Component({
  selector: 'app-schema-masse',
  templateUrl: './schemamasse-comp.component.html'
})
export class SchemaMasseComponent{
  sm = { voci_agg: {} };
  voci_aggiuntive(){
    const modalRef = this.modalService.open(VociAggiuntiveComponent, { centered: true, scrollable: true, size: 'lg' });
    modalRef.result.then((res) =>{
      if(res){
        for(let index in res){
          this.sm.voci_agg[res[index].m_model] = 0;
          this.sm.voci_agg[res[index].d_model] = 0;
          this.voci.push(res[index]);
          console.log(this.sm);
        }
      }
    });
  }
  del_voce(event){
    this.voci.splice(event.target.id, 1);
  }
}

1 Ответ

0 голосов
/ 27 февраля 2020

Решено, мне пришлось объявить временный объект, вставить все свойства, которые мне нужно использовать, и назначить первичному объекту временный объект: 

voci_aggiuntive(){
 const modalRef = this.modalService.open(VociAggiuntiveComponent, { centered: true, scrollable: true, size: 'lg' });
    modalRef.result.then((res) =>{
      if(res){
        for(let index in res){
          for(let key in res[index]){ if(key === 'm_model' || key === 'd_model'){ this.tmp_obj_voci[res[index][key]] = 0; }}
          this.sm.voci_agg = this.tmp_obj_voci;
          this.voci.push(res[index]);
        }
      }
    });
  }
...