Home / Questions / 520960
Accepted
Naidamag
Asked: 2022-08-17 08:38:52 +0800 CST 2022-08-17 08:38:52 +0800 CST

How to show in the html the value that a variable receives in typescript

  • 772

I want to paint the value that the numberTable variable receives in my html file, but I can't do it and I see it on the console. If you can help me, I appreciate it, I show you my code:

This is the component.html that has the buttons for each table:

<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>

This is the component.ts where when pressing each button the event with the id of each table is obtained:

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)
  }
}

This is the component where I want to get the table number

 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);
})

This is the html where I want to paint what was the table number that I saved the 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>

And this is the result: I show you an image as you can see the table number is empty and should show the table you select, which in the console you can see was table 02 enter image description here

html

1 Answers

  1. Best Answer

    There are different ways to detect the change EventEmiter is not intended for services [ EventEmiter ] 1

    It does not have this problem BehaviorSubject this is both an Observable and an observer and you can call or modify it anywhere in the code by communicating to the components and the view we can bind your string with an 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);
})

    • 1