eventemitter: busque información del cliente desde el componente secundario utilizando Event Emitter en Angular

Tengo dos componentes hermanos. En One Component tengo información del cliente, al hacer clic en ella paso la identificación y algo más de información al componente de la aplicación. Al encontrar la identificación, necesito encontrar la información completa del cliente y mostrarla en el componente hermano.

A continuación se muestra el código que tengo.

HTML del componente de la aplicación:

<customer-table [customers]="customers" (setSelectedId)="setSelectedId($event)"></customer-table>
<customer-details [selectedId]="selectedId" [customerDetailsRecords]="customerDetailsRecords"></customer-details>

Componente de la aplicación:

export class AppComponent {
  title = 'Customer Records';
  selectedId = '';

  customers: Customer[] = [{
      id: 'henry-gerard',
      firstName: "Henry",
      lastName: "Gerard",
      age: 21
    },
    {
      id: 'michael-platini',
      firstName: "Michael",
      lastName: "Platini",
      age: 40
    },
    {
      id: 'louis-figo',
      firstName: "Louis",
      lastName: "Figo",
      age: 37
    },
    {
      id: 'cristiana-ronaldinho',
      firstName: "Cristiana",
      lastName: "Ronaldinho",
      age: 15
    },
    {
      id: 'leonardo-messiah',
      firstName: "Leonardo",
      lastName: "Messiah",
      age: 25
    }
  ]

  customerDetailsRecords: CustomerDetail[] = [{
      id: 'henry-gerard',
      city: 'Los Angeles',
      gender: 'Male',
      pin: 3123,
      country: 'USA',
      state: 'CA'
    },
    {
      id: 'michael-platini',
      city: 'Miami',
      gender: 'Male',
      pin: 3176,
      country: 'USA',
      state: 'FL'
    },
    {
      id: 'louis-figo',
      city: 'Seattle',
      gender: 'Male',
      pin: 3176,
      country: 'USA',
      state: 'WA'
    },
    {
      id: 'cristiana-ronaldinho',
      city: 'Denver',
      gender: 'Female',
      pin: 3178,
      country: 'USA',
      state: 'CO'
    },
    {
      id: 'leonardo-messiah',
      city: 'Portland',
      gender: 'Female',
      pin: 3165,
      country: 'USA',
      state: 'OR'
    }
  ];

  setSelectedId(id) {
    //console.log(id);
    this.selectedId = id;
  }
}

Componente A:

export class CustomerTable implements OnInit {
  @Input() customers: Customer[];
  @Output() setSelectedId: EventEmitter<string> = new EventEmitter<string>();

  sendCustomerId(customer: string) {
    this.setSelectedId.emit(customer);
  }

  constructor() { }
}

Componente B:

export class CustomerDetails implements OnInit {
  @Input() customerDetailsRecords;
  @Input() selectedId;

  constructor() { }

------------------------------------

Prueba lo siguiente -

detalle-cliente.component.html -

<h2>Customer Detail</h2>
<div>
    {{customerDetail?.id}}
</div>

detalle-cliente.component.ts -

export class CustomerDetailsComponent {

    @Input() customerDetail: CustomerDetail;

    constructor() { }
}

tabla-cliente.componente.html-

<h2>Customer Table</h2>
<div *ngFor="let customer of customers" (click)="sendCustomerId(customer?.id)">
    <p>{{customer.id}}</p>
</div>

tabla-cliente.component.ts -

export class CustomerTableComponent {

    @Input() customers: Customer[];
    @Output() selected: EventEmitter<string> = new EventEmitter<string>();

    constructor() { }

    sendCustomerId(id: string) {
        this.selected.emit(id);
    }
}

aplicación.component.html -

<customer-table [customers]="customers" (selected)="setSelectedId($event)"></customer-table>
<customer-detail [customerDetail]="selectedCustomer"></customer-detail>

app.component.ts -

export class AppComponent {

    customers: Customer[] = // initialize array of Customer
    customerDetailsRecords: CustomerDetail[] = // initialize array of CustomerDetail
    
    selectedCustomer: CustomerDetail;

    constructor() { }   

    setSelectedId(id) {
        this.selectedCustomer = this.customerDetailsRecords.find(p => p.id == id);
    }
}

Aquí hay un StackBlitz funcional

6

@tkamath99 Cambié tu código en varios lugares. ¿Ha probado exactamente qué código se muestra? Por mi parte, está funcionando bien.

-atiyar

27 de marzo de 2021 a las 6:39

Encuentra el ID en el componente de la aplicación, pero no lleva esos datos al componente hermano. Ilustración como A -> Datos pasados ​​al componente de la aplicación -> Datos no pasados ​​al componente B

-tkamath99

27 de marzo de 2021 a las 6:40

He replicado el código en CodeSandbox. Por favor, eche un vistazo a codesandbox.io/s/fervent-rhodes-9mxdo?file=/src/app/…

-tkamath99

27 de marzo de 2021 a las 7:02

@tkamath99 He editado la respuesta. Revisar otra vez. En el archivo app.coomponent.ts, cambie setSelectedId(id: string) a setSelectedId(id) y funcionará.

-atiyar

27 de marzo de 2021 a las 7:03

Probé con su solución, pero no imprime ciertos valores como nombre, apellido, edad

-tkamath99

27 de marzo de 2021 a las 7:08

------------------------------------

WLo que puede hacer es recibir en el componente principal el elemento que desea mostrar en el componente hermano y pasarlo mediante enlace como lo está haciendo.

Para hacerlo, lo que puede hacer es declarar una variable que contenga el valor para pasar al componente B y en las vistas vincularla al componente B.

Cuando el componente A emite el nuevo valor, asígnelo a la variable y debería representarse en el componente B.