我們必須在 Angular 上構建的照片
到目前為止我們所擁有的
到目前為止我們所擁有的 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>uj5u.com熱心網友回復：
使用這樣的東西：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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/438238.html