oktatas:web:angular:angular_tablazat
Tartalomjegyzék
Angular táblázat
- Szerző: Sallai András
- Copyright © 2022, Sallai András
- Szerkesztve: 2025
- Web: https://szit.hu
Interfész létrehozása
ng generate interface product
- product.ts
export interface Product { id: number, name: string, desc: string, price: number }
Kiválasztott adatai
Lista létrehozása, rendelés kiíratása:
export class ProductListComponent implements OnInit { products: Product[] = [ {"id": 1, "name": "Tej", "desc": "Ovi tej", "price": 2.5}, {"id": 2, "name": "Kenyér", "desc": "fehér 0.5 kg", "price": 2.1}, {"id": 3, "name": "Vaj", "desc": "Ovi vaj", "price": 2.9}, ]; orderProduct(product: Product ) { console.log(product); } }
Sablon:
<table> <thead> <tr> <th>Id</th> <th>Name</th> <th>Description</th> <th>Price</th> </tr> </thead> <tbody> @for(product of productList; track product.id) { <tr> <td>{{product.id}}</td> <td>{{product.name}}</td> <td>{{product.desc}}</td> <td>{{product.price}}</td> <td> <button (click)="orderProduct(product)"> Rendel </button> </td> </tr> } </table>
oktatas/web/angular/angular_tablazat.txt · Utolsó módosítás: 2025/03/02 14:06 szerkesztette: admin