Angular iteráció

• Szerző: Sallai András
• Copyright © 2024, Sallai András
• Szerkesztve: 2024
• Licenc: CC BY-SA 4.0
• 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"
  ]

src/app/app.component.html

<ul>
    @for(fruit of fruitList; track fruit) {
        <li>{{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>
                        <!-- A DOM gyorsabb 
                        renderelése érdekében 
                        adjuk meg az azonosítót,
                        amit it az emp.id-->
    @for(emp of employees; track emp.id) {
        <tr>
            <td>{{emp.id}}</td>
            <td>{{emp.name}}</td>
            <td>{{emp.city}}</td>
            <td>{{emp.salary}}</td>
        </tr>    
    }
    </tbody>
</table>

@for (item of items; rack item.id; let idx = $index) {
 
}

Az index párosságának vizsgálata:

@for (item of items; rack item.id; let idx = $index, e = $even) {
 
}

Használható változók:

//...
import { NgFor } from '@angular/common';
 
@Component({
//..
  imports: [NgFor],
//..
})

Legyen például egy fruit nevű tömb:

  fruits = [
    'alma', 
    'körte', 
    'barack',
    'szilva'
  ];

//...
import { NgFor } from '@angular/common';
 
@Component({
//..
  imports: [NgFor],
//..
})

Iteráljuk a HTML sablonban:

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

<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.