Angular iteráció

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

A TypeScript fájlban létrehozott listákat, tömböket iterálhatjuk a HTML sablonban.

src/app/app.component.ts

  fruitList = [
    "alma",
    "körte",
    "barack",
    "szilva"
  ]

Iteráljuk a HTML sablonban:

src/app/app.component.html

<ul>
    <li *ngFor="let fruit of fruits">
        {{fruit}}
    </li>
</ul>

Legyen egy lista:

src/app/app.component.ts

  employees = [
    {id: 1, name: "Béla", city: "Szeged", salary: 392 },
    {id: 2, name: "Dénes", city: "Szolnok", salary: 395 },
    {id: 3, name: "Imre", city: "Szeged", salary: 397 },
  ]

Lista iterálása sablonban:

src/app/app.component.html

<table>
    <thead>
        <tr>
            <th>Id</th>
            <th>Név</th>
            <th>Település</th>
            <th>Fieztés</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let emp of employees">
            <td>{{emp.id}}</td>
            <td>{{emp.name}}</td>
            <td>{{emp.city}}</td>
            <td>{{emp.salary}}</td>
        </tr>    
    </tbody>
</table>

<p *ngFor="let task of tasks">{{ task.id }} {{ task.name }}</p>

Ebben a példában dolgozókat szeretnénk listázni. Erre a célra létrehoztunk egy külön komponenst first néven.

Külön komponens esetén a 17-s Angulartól importálni kell a CommondModule modult.

src/app/first/first.component.ts

import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
 
@Component({
  selector: 'app-first',
  standalone: true,
  imports: [CommonModule],  
  templateUrl: './first.component.html',
  styleUrls: ['./first.component.css']
})
export class FirstComponent implements OnInit {
 
  employees!: Employee[];
  constructor() { }
 
  ngOnInit(): void {
    this.employees = [
      { name: "Parke Béla", salary: 2850000 },
      { name: "Lenke Attila", salary: 2243500 },
      { name: "Tron Ferenc", salary: 2150500 }
    ]
  }
 
}
 
interface Employee {
  name: string,
  salary: number
}

src/app/first/first.component.html

<ul>
    <li *ngFor="let employee of employees">
        {{employee.name}} {{employee.salary}}
    </li>
</ul>

Az alábbi sorban, tettünk egy felkiáltójelet:

employees!: Employee[];

Erre azért van szükség, hogy mert nem a konstruktorban inicializáljuk az objektumot, és fordítónak ezzel alapból problémája van.

Ez a példa megegyezik az előzővel, de hozzáadtunk egy kiválasztási lehetőséget. Bármelyik névre kattintunk, az megjelenik a lista alatt a „Kiválasztott” szöveg után.

src/app/first/first.component.ts

import { Component, OnInit } from '@angular/core';
 
@Component({
  selector: 'app-first',
  templateUrl: './first.component.html',
  styleUrls: ['./first.component.css']
})
export class FirstComponent implements OnInit {
 
  employees!: Employee[];
  selected!: string;
  constructor() { }
 
  ngOnInit(): void {
    this.employees = [
      { name: "Parke Béla", salary: 2850000 },
      { name: "Lenke Attila", salary: 2243500 },
      { name: "Tron Ferenc", salary: 2150500 }
    ]
  }
 
  onClickEmployee(employee: Employee) {
    this.selected = employee.name;
  }
 
}
 
interface Employee {
  name: string,
  salary: number
}

src/app/first/first.component.html

<ul>
    <li *ngFor="let employee of employees" 
    (click)="onClickEmployee(employee)">
        {{employee.name}} {{employee.salary}}
    </li>
</ul>
 
<p>Kiválasztott: {{selected}}</p>

<tr *ngFor="let emp of employees">
    <td>{{emp.name}}}</td>
    <td>{{valamiAtalakitoFuggveny(emp.city)}}</td>
</tr>

A valamiAtalakitoFuggveny() csinál valamit a településsel majd visszaad valamit és az az érték kerül renderelésre.