• Szerző: Sallai András
• Copyright © Sallai András, 2022
• Licenc: CC Attribution-Share Alike 4.0 International
• Web: https://szit.hu

ng generate interface product

product.ts

export interface Product {
    id: number,
    name: string,
    desc: string,
    price: number
}

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>

Az interfész változatlan:

product.ts

export interface Product {
    "id": number,
    "name": string,
    "desc": string,
    "price": number
}

<div class="container-sm container-md">
<h2>Termékek</h2>
 
    <div *ngFor="let product of products">
        <div class="p-1 bg-light">
            <h3 class="text-primary">{{ product.name }}</h3>
            <div>
                {{ product.desc }}
            </div>
            <div>
                {{ product.price }} SW
            </div>
            <button class="btn btn-info"
            (click)="add_product($event)"
            attr.data-id="{{ product.id }}"            
            attr.data-name="{{ product.name }}"
            attr.data-desc="{{ product.desc }}"
            attr.data-price="{{ product.price }}"
            >
                Rendel
            </button>
        </div>
    </div>
 
</div>

//...
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},
  ];
 
  constructor() { }
 
  ngOnInit(): void {
  }
 
  add_product($event: any) {
    console.log($event.target.dataset.id)    
  }
 
}