0

Quiero pintar el valor que esta recibiento la variable numberTable en mi archivo html, pero no logro hacerlo y por consola si lo veo. Si me pueden ayudar, se los agradezco, les muestro mi codigo:

Este es el componente.html que tienes los botones de casa mesa:

<div class="btn-table-container">
  <button (click)="selectTable($event)" id="mesa01" class="btn-table" [routerLink]="['/', 'menu']">Mesa 01</button>
  <button (click)="selectTable($event)" id="mesa02" class="btn-table" [routerLink]="['/', 'menu']">Mesa 02</button>
  <button (click)="selectTable($event)" id="mesa03" class="btn-table" [routerLink]="['/', 'menu']">Mesa 03</button>
  <button (click)="selectTable($event)" id="mesa04" class="btn-table" [routerLink]="['/', 'menu']">Mesa 04</button>
  <button (click)="selectTable($event)" id="mesa05" class="btn-table" [routerLink]="['/', 'menu']">Mesa 05</button>
  <button (click)="selectTable($event)" id="mesa06" class="btn-table" [routerLink]="['/', 'menu']">Mesa 06</button>
</div>

Este es el componente.ts donde al presionar cada boton se obtiene el evento con el id de cada mesa :

import { Component, OnInit } from '@angular/core';
import { DataService } from '../services/data.service';

@Component({
   selector: 'app-waiter-tables',
   templateUrl: './waiter-tables.component.html',
   styleUrls: ['./waiter-tables.component.scss']
})
export class WaiterTablesComponent implements OnInit {

constructor(private dataService: DataService) { }

  ngOnInit(): void {

  }
  selectTable(event: any) {
     const idTable = event.target.id;
     console.log(idTable)
     this.dataService.tablesEvent$.emit(idTable)
  }
}

Este es el componente donde quiero obtener el numero de mesa

 numberTable: string = '';

//Aqui me suscribo al servicio
this.dataService.tablesEvent$.subscribe(numMesa => {
  this.numberTable = numMesa;
  console.log(this.numberTable); 
  console.log('numero de mesa es:', numMesa);
})

Este es el html donde quiero pintar cual fue el numero de mesa que guardo la variable

<div class="commensalDates">
    <div class="commensalNameDiv">
      <label for="commensal" class="commensalNameLabel">
        <fa-icon [icon]="['fas', 'user']"></fa-icon>
      </label>
      <input type="text" class="commensalNameInput" class="form-control" (keyup)="changeCommensalName($event)"
        placeholder="Nombre cliente" aria-label="Username" aria-describedby="basic-addon1">
    </div>
    <label for="commensal" class="commensalTableLabel">Mesa N°: {{numberTable}}</label>

  </div>

Y este es el resultado: les muestro imagen como pueden observar el numero de mesa esta vacio y deberia mostrar la mesa que seleccione, que en la consola se puede ver que fue la mesa 02 introducir la descripción de la imagen aquí

1 respuesta 1

1

Hay distintas formas de detectar el cambio EventEmiter no esta pensado para servicios [EventEmiter]1

No tiene este problema BehaviorSubject este es tanto un Observable como un observador y lo podes llamar o modificar en cualquier parte del codigo counicando a los componentes y la vista podemos vincular a tu string con un observable

//data service
import { BehaviorSubject, Observable } from 'rxjs';


idTable:String;
idTable$: BehaviorSubject<string> = new BehaviorSubject('');
ngOnInit() {
  this.idTable$.subscribe(m=>console.log('idTable',m));}


 public escucha(): Observable<string> {
    return this.idTable$.asObservable();
}
public emite(idTable: string): void {
    this.idTable$.next(idTable);
}


   //tu codigo vinculandolo al servicio
     selectTable(event: any) {
     const idTable = event.target.id;
     console.log(idTable)
     this.dataService.emite(idTable)
     
     
// nos suscribimos con :
 this.dataService.escucha().subscribe(numMesa => {
  this.numberTable = numMesa;
  console.log(this.numberTable); 
  console.log('numero de mesa es:', numMesa);
})
  

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.