Felhasználói eszközök

Eszközök a webhelyen


oktatas:web:angular:angular_17_iteracio

< Angular

Angular iteráció

Iteráció

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

Lista iterálása

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>

Objektumlista iterálása

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>

Az index és más változók használata

@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:

$count Az iterált elemek száma
$index Az aktuális sor index
$first Az első sor
$last Az utolsó sor
$even Páros-e az index
$odd Páratlan-e az index

Régi változat

A régebbi változat használatához importálnunk kell az NgFor modult
//...
import { NgFor } from '@angular/common';
 
@Component({
//..
  imports: [NgFor],
//..
})

Gyümölcslista

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>

Objektumlista iterálása

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

Teljes példa

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.

Kiválasztással

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>

Függvényhívás egy elemen

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

oktatas/web/angular/angular_17_iteracio.txt · Utolsó módosítás: 2024/08/26 15:48 szerkesztette: admin