set i update — zmiana wartości sygnału

Czego się dziś nauczysz

Przygotowanie: lekcja 09 — umiesz utworzyć sygnał, odczytać go z nawiasami i ustawić przez set. Przewidywany czas: 2 × 45 min z zadaniami.

Nowa wartość z poprzedniej

Większość zmian w aplikacji wygląda tak samo: weź to, co jest, i trochę zmień. Licznik o jeden więcej. Lista z jedną pozycją więcej. To samo wydarzenie, ale w innej sali. Za każdym razem potrzebujesz starej wartości, żeby policzyć nową.

W nawiasie update stoi funkcja strzałkowa: po lewej od => nazwa dla starej wartości (tu n), po prawej wyrażenie, którego wynik stanie się nową wartością. Nazwa jest dowolna — równie dobrze napiszesz stara => stara + 1. Angular sam wywoła tę funkcję i poda jej aktualną wartość sygnału.

Zasada: nowe pudełko zamiast przemeblowania starego

Sygnał sprawdza, czy dostał inną wartość niż miał. Dla liczby czy tekstu to proste. Dla tablicy i obiektu „inna” znaczy „inny obiekt w pamięci”. Jeśli do starej tablicy dopiszesz element metodą push, to wciąż jest ta sama tablica — sygnał uzna, że nic się nie zmieniło, i nikogo nie powiadomi.

Trzy kropki ... to operator rozproszenia. [...lista, 'X'] znaczy: „nowa tablica ze wszystkimi elementami lista, a na końcu 'X'”. { ...w, sala: 7 } — „kopia obiektu w, ale z salą 7”. filter zostawia te elementy, dla których warunek jest prawdziwy, i zawsze zwraca nową tablicę.

set kontra update

Trzy przyciski: dwa zmieniają licznik o jeden, trzeci zeruje. Zwróć uwagę, gdzie użyto update, a gdzie set.

import { Component, signal } from '@angular/core';

@Component({
    selector: 'app-demo',
    imports: [],
    templateUrl: './demo.html'
})
export class Demo {
    readonly zapisanych = signal(0);

    dodaj(): void {
        this.zapisanych.update(n => n + 1);
    }

    odejmij(): void {
        this.zapisanych.update(n => n - 1);
    }

    wyzeruj(): void {
        this.zapisanych.set(0);
    }
}

<div class="p-3">
  <p class="fs-4">Zapisanych: {{ zapisanych() }}</p>
  <button class="btn btn-success me-2" (click)="dodaj()">+1</button>
  <button class="btn btn-warning me-2" (click)="odejmij()">−1</button>
  <button class="btn btn-outline-danger" (click)="wyzeruj()">Zeruj</button>
</div>

Zapisanych: 2

Licznik może zejść poniżej zera — tym zajmiesz się w zadaniu 1.

Dodawanie do listy — nowa tablica

Lista zapisanych osób. Imię wpisujesz w pole #pole (lekcja 08) i klikasz Dodaj. Pole i przycisk są sklejone klasą Bootstrapa input-group.

import { Component, signal } from '@angular/core';

@Component({
    selector: 'app-demo',
    imports: [],
    templateUrl: './demo.html'
})
export class Demo {
    readonly osoby = signal<string[]>(['Ala', 'Bartek']);

    dodaj(imie: string): void {
        const czyste = imie.trim();
        if (czyste === '') {
            return;
        }
        this.osoby.update(lista => [...lista, czyste]);
    }
}

<div class="p-3" style="width: 24rem">
  <div class="input-group mb-3">
    <input #pole class="form-control" placeholder="Imię">
    <button class="btn btn-primary" (click)="dodaj(pole.value); pole.value = ''">Dodaj</button>
  </div>
  <p>Zapisane osoby ({{ osoby().length }}): {{ osoby().join(', ') }}</p>
</div>

Zapisane osoby (3): Ala, Bartek, Celina

Zapis signal<string[]>([...]) mówi TypeScriptowi: „w tym sygnale zawsze będzie tablica tekstów”. Spróbuj dodać same spacje — nic się nie stanie, bo trim() zamienia je na pusty tekst.

Pułapka z push

Zapis na wydarzenie często trwa chwilę — dane lecą do serwera. Udajemy to funkcją setTimeout, która wykona kod raz, po sekundzie. Oba przyciski dopisują osobę z opóźnieniem: pierwszy przez push, drugi przez nową tablicę.

import { Component, signal } from '@angular/core';

@Component({
    selector: 'app-demo',
    imports: [],
    templateUrl: './demo.html'
})
export class Demo {
    readonly osoby = signal<string[]>(['Ala']);

    zapiszPush(): void {
        setTimeout(() => {
            this.osoby().push('Gość (push)');            // ta sama tablica
        }, 1000);
    }

    zapiszNowa(): void {
        setTimeout(() => {
            this.osoby.update(lista => [...lista, 'Gość (nowa)']);   // nowa tablica
        }, 1000);
    }
}

<div class="p-3">
  <button class="btn btn-outline-danger me-2" (click)="zapiszPush()">Zapisz przez push</button>
  <button class="btn btn-success" (click)="zapiszNowa()">Zapisz przez nową tablicę</button>
  <p class="mt-3">Zapisani: {{ osoby().join(', ') }}</p>
</div>

Zapisz przez push, czekasz 3 s:      Zapisani: Ala
Zapisz przez nową tablicę — od razu: Zapisani: Ala, Gość (push)
… i po sekundzie:                    Zapisani: Ala, Gość (push), Gość (nowa)

Po push nic się nie dzieje. Kliknięcie drugiego przycisku odświeża ekran — i wtedy wychodzi na jaw gość, który od dawna siedział w tablicy, tylko nikt o nim ekranowi nie powiedział. Po sekundzie dochodzi wpis z nowej tablicy — już bez żadnego kliknięcia.

Usuwanie z listy i zmiana pola obiektu

Dwie operacje, które wykonasz w każdym projekcie: usuwanie metodą filter i zmiana jednego pola obiektu kopią z operatorem rozproszenia.

import { Component, signal } from '@angular/core';

@Component({
    selector: 'app-demo',
    imports: [],
    templateUrl: './demo.html'
})
export class Demo {
    readonly osoby = signal<string[]>(['Ala', 'Bartek', 'Celina', 'Darek']);
    readonly wydarzenie = signal({ tytul: 'Noc robotów', sala: 12, miejsca: 20 });

    usunPierwsza(): void {
        this.osoby.update(lista => lista.filter((imie, nr) => nr !== 0));
    }

    usunBartka(): void {
        this.osoby.update(lista => lista.filter(imie => imie !== 'Bartek'));
    }

    przeniesDoSali7(): void {
        this.wydarzenie.update(w => ({ ...w, sala: 7 }));
    }
}

<div class="card m-3 p-3" style="width: 26rem">
  <h5>{{ wydarzenie().tytul }}</h5>
  <p>Sala {{ wydarzenie().sala }}, miejsc: {{ wydarzenie().miejsca }}</p>
  <p>Zapisani: {{ osoby().join(', ') }}</p>
  <button class="btn btn-outline-danger mb-2" (click)="usunPierwsza()">Usuń pierwszą osobę</button>
  <button class="btn btn-outline-danger mb-2" (click)="usunBartka()">Usuń Bartka</button>
  <button class="btn btn-outline-primary" (click)="przeniesDoSali7()">Przenieś do sali 7</button>
</div>

Noc robotów
Sala 7, miejsc: 20
Zapisani: Ala, Celina, Darek

Przy przeniesieniu zmienia się tylko numer sali — tytuł i liczba miejsc zostają, bo ...w skopiowało je ze starego obiektu. W filter((imie, nr) => nr !== 0) drugi parametr to numer elementu: „zostaw wszystkie oprócz pierwszego”.

Zestawienie elementów

Zanim utkniesz

Zadania

Co trzeba zapamiętać

• set(x) — gdy nowa wartość nie zależy od starej; update(stara => nowa) — gdy zależy.
• Argumentem update jest funkcja strzałkowa, nie wartość.
• Sygnał z tablicą typujesz: signal<string[]>([]).
• Do tablicy dodajesz przez [...lista, nowy], usuwasz przez filter.
• Pole obiektu zmieniasz kopią: ({ ...obiekt, pole: nowa }) — z nawiasami wokół klamer.
• push na tablicy w sygnale zmienia zawartość, ale sygnał tego nie widzi.

Sprawdź się: dlaczego this.osoby().push('Ola') w metodzie od kliknięcia „działa”, a ten sam kod w setTimeout już nie?

Dokumentacja: angular.dev — zapisywalne sygnały.