Senden von Daten von Kind zu Elternkomponente

Question

Ich habe eine Schaltfläche auf meiner untergeordneten Komponente, die Informationen an die übergeordnete Komponente senden sollte, aber diese Schaltfläche sendet diese Informationen nicht. Ich vermisse wahrscheinlich etwas, aber ich habe es immer noch nicht bemerkt.

Hier ist der Code aus dem Knopf in meinem Kind Komponente (zwei Tasten sind: selectPessoaJuridica und selectPessoaFisica:

import { Component, Input, Output, EventEmitter} from '@angular/core'; 
import { FormBuilder, FormGroup, Validators, FormArray, FormsModule, ReactiveFormsModule} from '@angular/forms'; 
import {FinalizaDisputaService} from '../services/finaliza-disputa.service'; 
import {FinalizaDisputaComponent} from './finaliza-disputa.component' 

@Component({ 
    moduleId: module.id, 
    selector: 'titular', 
    templateUrl: 'dados-titular.component.html' 
}) 
export class TitularComponent { 
    // we will pass in address from App component 
    @Input('group') 
    public titularForm: FormGroup; 
    @Input() submitted:any; 
    @Input() indexNumber:any; 
    @Output() modelChanged = new EventEmitter<boolean>(); 
    public isJuridica = false; 
    classe = { 
    pessoa_fisica: 'selected', 
    pessoa_juridica: '' 
    }; 

    constructor(private _fb: FormBuilder, private finalizaAcordo:FinalizaDisputaService) {} 

    selectPessoaFisica(e:boolean){ 
    e = false; 
    this.classe.pessoa_fisica = "selected"; 
    this.isJuridica = false; 
    this.classe.pessoa_juridica = ""; 
    this.modelChanged.emit(e) 
    } 

    selectPessoaJuridica(e:boolean){ 
    e = true; 
    this.classe.pessoa_fisica = ""; 
    this.classe.pessoa_juridica = "selected"; 
    this.isJuridica = true; 
    console.log("ativou", e) 
    this.modelChanged.emit(e); 
    } 
} 

Also, was sollte die übergeordneten tun ist, mitteilen, dass e jetzt falsch ist

.

Dies ist die hTML vom Stammkomponente:

<titular (modelChanged)="recebeValidators($event)" [indexNumber]="indice" [submitted]="submitted" [group]="formDadosBancarios.controls.dados_titular.controls[i]"></titular> 

Und dies ist der Code aus Stammkomponente wo ich sollte den Wert von e (recebeValidators) erhalten:

import { Component, OnChanges, OnInit, Input } from '@angular/core'; 
import { Http } from '@angular/http'; 
import { FormBuilder, FormGroup, Validators, FormArray, FormsModule, ReactiveFormsModule, AbstractControl, ValidatorFn } from '@angular/forms'; 
import { FinalizaDisputaService } from '../services/finaliza-disputa.service'; 
import {DisputaService} from '../../disputas/services/disputas.service'; 
import { dadosAcordo } from '../model/dados-acordo.interface'; 
import { TitularComponent } from './dados-titular.component'; 
import {Routes, RouterModule, Router, ActivatedRoute} from '@angular/router'; 

@Component({ 
    moduleId: module.id, 
    selector: 'detalhes', 
    templateUrl: `finaliza-disputa.component.html`, 
    providers: [FinalizaDisputaService] 
}) 

export class FinalizaDisputaComponent implements OnInit { 
    public dados: dadosAcordo; 
    disputa:any; 
    public formDadosBancarios: FormGroup; 
    public submitted: boolean; 
    public events: any[] = []; 
    public servError: any; 
    public indice = 0; 
    public loading = false; 
    soma = 0; 
    public servSuccess: any; 
    @Input() e:boolean; 
    cpf_REGEXP = /^\d+$/; 

    constructor(private _fb: FormBuilder, private service:DisputaService, private finalizaAcordo: FinalizaDisputaService, 
    private route:ActivatedRoute, private router:Router) {} 

    ngOnInit() { 
    this.route.params.subscribe(params => { 
     let id = params['id']; 
     this.service 
     .buscaPorId(id) 
     .subscribe(disputa => { 
      this.disputa = disputa; 
      console.log(disputa.campanha); 
      console.log(this.disputa.propostas_realizadas); 
     }, 
     erro => console.log(erro)); 
    }) 

    this.formDadosBancarios = this._fb.group({ 
     id: [''], 
     termos_condicoes: [false, Validators.requiredTrue], 
     dados_titular: this._fb.array([ 
     this.initTitular() 
     ]) 
    }) 
    } 
    /** 
    * initTitular- Inicializa o grupo de formulário dinâmico e suas validações 
    * @returns '' 
    */ 
    initTitular() { 
    return this._fb.group({ 
     titular: ['', [<any>Validators.required, <any>Validators.minLength(3)]], 
     cnpj: [''], 
     cpf: ['', <any>Validators.required], 
     data_nasc: ['', <any>Validators.required], 
     agencia: ['', <any>Validators.required], 
     banco: ['', <any>Validators.required], 
     conta: ['', <any>Validators.required], 
     tipo: ['', <any>Validators.required], 
     pessoa_juridica: [false], 
     valor_deposito: [''] 
    }) 
    } 
    // this is where I receive e 

    recebeValidators(model: dadosAcordo, e: any) { 
    console.log("test", e); 
    const array = <FormArray>this.formDadosBancarios.get('dados_titular'); 
    const cpf = array.at(this.indice).get("cpf"); 
    const cnpj = array.at(this.indice).get('cnpj'); 
    const data_nasc = array.at(this.indice).get('data_nasc'); 
    const cpfCtrl: AbstractControl = this.formDadosBancarios.get(['dados_titular', this.indice, 'cpf']); 
    const pessoa_juridicaCtrl: AbstractControl = this.formDadosBancarios.get(['dados_titular', this.indice, 'pessoa_juridica']) 
    const cnpjCtrl: AbstractControl = this.formDadosBancarios.get(['dados_titular', this.indice, 'cnpj']); 
    const data_nascCtrl: AbstractControl = this.formDadosBancarios.get(['dados_titular', this.indice, 'data_nasc']); 
    const reqValidators: ValidatorFn[] = [Validators.required, Validators.pattern(this.cpf_REGEXP)]; 
    if (e == true) { 
     data_nascCtrl.clearValidators(); 
     cpfCtrl.clearValidators(); 
     cnpjCtrl.setValidators(reqValidators); 
    }else{ 
     cnpjCtrl.clearValidators(); 
     cpfCtrl.setValidators(reqValidators); 
     data_nascCtrl.setValidators(reqValidators); 
    } 
    data_nascCtrl.updateValueAndValidity(); 
    cpfCtrl.updateValueAndValidity(); 
    cnpjCtrl.updateValueAndValidity(); 
    } 

Aber statt false des Druckens es undefined druckt. Kann mir jemand helfen?

dank

Answer 1

Es scheint, dass Sie ein Klassenattribut mit dem Funktionsparameter "e" in der Funktion "recebeValidators" spiegeln.

Der Code:

console.log("test", this.e); 

eigentlich sein sollte:

console.log("test", e); 

Um die Möglichkeit eines möglichen Gussfehler in der EventEmitter auszuschließen, versuchen Sie nicht den Parameter Funktion erneut verwenden. Beispiel:

selectPessoaFisica(e:any) { 
    e = false; 
    this.modelChanged.emit(e) 
} 

könnte neu geschrieben werden als:

selectPessoaFisica() { 
    this.modelChanged.emit(false); 
} 

Es gibt auch einen zusätzlichen Parameter in der Aufnahmefunktion:

Diese:

recebeValidators(model: dadosAcordo, e: boolean) { 

werden sollen:

recebeValidators(e: boolean) { 

Answer 2

sollten Sie geben es Casting

@Output() modelChanged = new EventEmitter<boolean>(); 

Auch sind Sie eine falsche Variable beziehen, und Sie sollten nur ein Argument übergeben werden, wie es in der übergeordneten Komponente ist, und entfernen Sie das Schlüsselwort this

recebeValidators(e: boolean) { 
    console.log("test", e); 
}