使用角上的另一个按钮打印所选择并添加的碟子列表

Question

我们必须建立在角上的照片

到目前为止我们有什么

到目前为止我们有什么？

我们需要建立一个简单的订购系统，我们不知道如何打印选定的几个版材。我们只打印了一个板块时，选择它和按下+按钮。有没有人知道如何选择，即使是在选择新菜的时候？提前感谢您的帮助！

​

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>

​

Answer 1

就像这样：https://stackblitz.com/edit/angular-ivy-gxbejh

应用组件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>