< Angular

Angular táblázat

Szerző: Sallai András

Copyright © Sallai András, 2022

Licenc: CC Attribution-Share Alike 4.0 International

Web: https://szit.hu

Interfész létrehozása

ng generate interface product

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>