Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Passar valor entre componentes

Boa tarde pessoal, seguinte. Tenho um código que se repete em várias páginas que é inserção de usuário em determinada tarefa fiz um componente pra isso mas o valor não está sendo passado.

import { Component, OnInit } from '@angular/core';
import { NotificationsService } from "angular2-notifications";

import { User } from '../shared/user.model';
import { UserService } from '../shared/user.service';


@Component({
  selector: 'form-add-user',
  templateUrl: './form-add-user.component.html',
  styleUrls: ['./form-add-user.component.css'],
  providers: [UserService]
})
export class FormAddUserComponent implements OnInit {

  user: User;
  usersAvailable: Array<User> = new Array<User>();
  userSelected: User = new User();

  constructor(private userService: UserService,
    private notificationsService: NotificationsService) { }

  ngOnInit() {
    this.getAllUsersAvaliable();
  }

  addUser(user: User) {
    this.userSelected = new User();
    this.setUserSelected(user);
  }

  getAllUsersAvaliable() {
    this.userService.getAll().subscribe(users => this.usersAvailable = users,
      error => this.notificationsService.error('Error', error));
  }

  getUserSelectedByCpf(cpf: string) {
    this.userSelected = new User;
    this.userService.getByCpf(cpf).subscribe(userSelected => this.userSelected = userSelected,
      error => this.notificationsService.error('Error', error));
    console.log("Teste" + this.userSelected.name);
  }

  getUserSelected(): User {
    return this.userSelected;
  }

  setUserSelected(userSelected: User) {
    this.userSelected = userSelected;
  }

}


<div class="input-group" style="padding-bottom: 15px;">
  <span class="input-group-addon"><i class="fa fa-fw fa-search"></i></span>
  <input #gbUser type="text" pInputText size="50" class="form-control" style="width: 300px;" placeholder="Pesquisar usuário">
</div>
<!--Responsável disponíveis -->
<div class="form-group">
  <p-dataTable [value]="usersAvailable" [rows]="2" [paginator]="true" [pageLinks]="3" [responsive]="true" [globalFilter]="gbUser">
    <p-column field="name" header="Nome"></p-column>
    <p-column styleClass="col-button">
      <template let-user="rowData" pTemplate type="body">
        <button type="button" class="btn btn-default btn-sm" (click)="addUser(user)">
            <span class="glyphicon glyphicon-plus"></span>
        </button>
      </template>
    </p-column>
  </p-dataTable>
</div>
<!--Responsável selecionadas -->
<div class="form-group">
  <label for="name">Usuário selecionado: </label>
  <input class="form-control" type="text" name="userSelected" [(ngModel)]="userSelected.name" />
</div>


import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import * as moment from 'moment';
import { NotificationsService } from "angular2-notifications";

import { VisitService, VisitValidator, Visit, ListVisitsSelectedComponent } from '../visitor';
import { Agency, AgencyService } from '../agency';
import { CustomerBusinessUnit, CustomerBusinessUnitService } from '../customer';
import { User, UserService, FormAddUserComponent } from '../user';
import { ModalConfirmComponent } from '../util/modal-confirm/modal-confirm.component';
import { DateUtil } from '../util/dateUtil.component';
import { ItineraryService, Itinerary } from './index';
import { FormAddCustomerComponent } from '../customer';

@Component({
  selector: 'itinerary',
  templateUrl: './itinerary.component.html',
  providers: [ItineraryService, VisitService, UserService, VisitValidator, AgencyService, CustomerBusinessUnitService, FormAddCustomerComponent, FormAddUserComponent]

})
export class ItineraryComponent implements OnInit {

  itinerary: Itinerary = new Itinerary;
  visities: Array<Visit>;
  itineraries: Array<Itinerary>;

  //user
  usersAvailable: Array<User>;
  usersSelected: Array<User>;
  user: User;

  //visit
  visitiesAvailable: Array<Visit>;
  visitiesSelected: Array<Visit>;
  visit: Visit;
  idExcluir: string;
  displayModal: boolean = false;
  // listVisitsSelectedComponent: ListVisitsSelectedComponent = new ListVisitsSelectedComponent();


  //customer
  customerBusinessUnit: CustomerBusinessUnit;
  customersBusinessUnitAvaliable: Array<CustomerBusinessUnit>;
  customersBusinessUnitSelected: Array<CustomerBusinessUnit>;



  constructor(
    private itineraryService: ItineraryService,
    private visitService: VisitService,
    private userService: UserService,
    private visitValidator: VisitValidator,
    private agencyService: AgencyService,
    private notificationService: NotificationsService,
    private customerBusinessUnitService: CustomerBusinessUnitService,
    private formAddUserComponent: FormAddUserComponent
  ) { console.log("constructor") }

  ngOnInit() {
    this.getAll();
    this.getAllUser();
    this.getAllVisities();

    // this.getAllCustomers();
    console.log("Init");
  }

  new() {
    this.itinerary = new Itinerary();
    this.itinerary.listVisity = new Array<Visit>();
    this.clear();

    this.displayModal = true;
  }

  clear() {

    this.visit = null;
    this.agenciesSelected = null;
    this.visitiesSelected = null;
    this.usersSelected = new Array<User>();
    this.visitiesSelected = new Array<Visit>();
    this.agenciesSelected = new Array<Agency>();
    // this.customersBusinessUnitAvaliable = new Array<CustomerBusinessUnit>();
    this.customersBusinessUnitSelected = new Array<CustomerBusinessUnit>();
    this.visit = new Visit();
  }

  edit(itinerary: Itinerary) {
    this.clear();
    this.itinerary = itinerary;
    this.formAddUserComponent.getUserSelectedByCpf(this.itinerary.cpfUser);
  }

  delete(id: string) {
    this.idExcluir = id;
  }

  onSave() {
    console.log("save" + this.itinerary);

    this.itinerary.dateItinerary = DateUtil.convertStringToDateISO(this.itinerary.dateItinerary, 'DD/MM/YYYY');
    console.log(JSON.stringify(this.itinerary));
    this.itineraryService.save(this.itinerary).subscribe((data) => {
      this.getAll();
      this.notificationService.success(`Sucesso`, `Gravado com sucesso.`);
    }, error => {
      this.notificationService.error(`Erro`, error);
    });
    // 
    this.displayModal = false;
    console.log(this.itinerary);
    // this.itinerary = null;*///
  }


  addVisit(visit: Visit) {

    this.user = new User();
    this.user = this.formAddUserComponent.getUserSelected();
    console.log(this.user.name);
    //Exibe undefined

    this.visit = visit;
    //console.log(visit);
    this.visitiesSelected.push(visit);
    this.itinerary.listVisity.push(visit);
    this.clear();
    console.log(this.itinerary);
  }

  removeVisit(visit: Visit, visities: Array<Visit>) {
    this.visitiesAvailable.push(visit);
    let index = visities.indexOf(visit);
    visities.splice(index, 1);
  }


  getAll() {
    this.itineraryService
      .getAllItineraries()
      .subscribe(
      a => this.itineraries = a,
      error => this.notificationService.error(`Erro`, error));
  }

  getAllUser() {
    this.userService
      .getAll()
      .subscribe(
      a => this.usersAvailable = a,
      error => this.notificationService.error(`Erro`, error));
  }

  getAllVisities() {
    this.visitService.getAll()
      .subscribe(
      a => this.visitiesAvailable = a,
      error => this.notificationService.error(`Erro`, error));
  }


  getUserByCpf(cpf: string): User {
    this.userService.getByCpf(cpf).subscribe((user => { this.user = user }),
      error => this.notificationService.error('Erro', error));
    return this.user;
  }

}

Estou injetando o formAddUserComponent via construtor e no método de salvar visita invoco o getUserSelected que deveria retornar o usuário mas no console ele exibe indefinido. Aguardo uma possível ajuda.

2 respostas

Vi essa linha no seu código:

new User

Se user é uma classe e você esta criando uma instância faltou chamar o construtor:

new User()

solução!

O problema não era esse não, ele funciona mesmo sem os parênteses. Eu mudei a forma de acesso pra viewchild e funcionou