使用angular上的其他按钮打印所选和添加的菜肴列表

Question

我们必须在角度上构建的图片

到目前为止我们有什么

到目前为止我们有什么II

我们需要建立一个简单的订购系统，但我们不知道如何打印所选的几个印版。当选择并按下+按钮时，我们只打印了一个印版。有人知道如何保持选择，即使在选择新菜时也是如此吗？提前感谢您的帮助！

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

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