Photo of what we have to build on angular

What we have so far

What we have so far II

We need to build a simple ordering system and we cannot figure out how to print several of the plates selected. We have only managed to print one plate when selecting it and pressing the button. Does anyone know how to make the selections stay, even when selecting new dishes? Thank you in advance for the help!

import { Component } from '@angular/core';
import { PLATOS } from './lista-platos';
import { Plato } from './plato';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  title = 'Restaurante';

  selectedOption!: Plato;
  printedOption!: Plato;

  options = PLATOS;

  print() {
    
    this.printedOption = this.selectedOption;
    console.log('My input: ', this.selectedOption);
  }
}

import { Plato } from './plato';

export const PLATOS: Plato[] = [
  { name: 'Macarrones con chorizo', price: 8.90 },
  { name: 'Pasta al pesto', price: 10.20 },
  { name: 'Pizza', price: 7.80 },
  { name: 'Rollitos primavera', price: 5.50 },
  { name: 'Arroz tres delicias', price: 6.70 }
];

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<select [(ngModel)]="selectedOption">
  <option *ngFor="let o of options">{{ o.name }} ({{ o.price }}€)</option>
</select>
<button (click)="print()"> </button>

<!-- <div *ngFor="let o of options">
  <div *ngIf="o == printedOption">
    <p>{{ printedOption }}</p>
  </div>
</div> -->
<p>{{ printedOption }}</p>

CodePudding user response：

Go with something like this: https://stackblitz.com/edit/angular-ivy-gxbejh

app-component ts:

import { Component } from '@angular/core';
import { PLATOS } from './lista-platos';
import { Plato } from './plato';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  selectedOption: any;
  options = PLATOS;
  takenPlatos: Plato[] = [];
  totalPrice: number = 0;

  addPlato(plato: Plato) {
    this.takenPlatos.push(plato);
    this.totalPrice  = plato.price;
  }

  removePlato(index: number) {
    this.totalPrice -= this.takenPlatos[index].price;
    this.takenPlatos.splice(index, 1);
  }
}

app-component html:

<h2>ORDEN</h2>

Consumicion:
<select [(ngModel)]="selectedOption">
  <option *ngFor="let option of options; let i = index" [ngValue]="option">
    {{ option.name }} ({{ option.price }}€)
  </option>
</select>
<button (click)="addPlato(selectedOption)"> </button>

<ng-container *ngIf="takenPlatos.length > 0">
  <h3>Consumiciones:</h3>
  <table>
    <tr *ngFor="let plato of takenPlatos; let i = index">
      <th>{{ plato.name }}</th>
      <th>{{ plato.price }} €</th>
      <th><button (click)="removePlato(i)">-</button></th>
    </tr>
  </table>
  <table>
    <tr>
      <th>TOTAL</th>
      <th>{{ totalPrice }} €</th>
    </tr>
  </table>
</ng-container>