Angular Academy · Pelajaran

Entiti dan Ciri Tersuai

Urus koleksi dengan withEntities.

Pelajaran 4 daripada 413 langkah

Entiti dan Ciri Tersuai ialah pelajaran Angular Academy percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Angular Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Angular Academy merangkumi sejumlah 4 pelajaran.

Mengurus Koleksi

Senarai rekod (todo, pengguna dan produk) sangat lazim sehingga NgRx menyediakan withEntities untuk menguruskannya dengan keadaan ternormal dan fungsi pengemas kini sedia digunakan.

withEntities

withEntities menyimpan item berdasarkan id dalam entityMap bersama tatasusunan ids yang tersusun, serta mendedahkan isyarat terkomput entities bagi senarai tersebut.

import { withEntities } from '@ngrx/signals/entities';

export const TodoStore = signalStore(
  withEntities<Todo>()
);
// store.entities() -> Todo[]

Pengemas Kini Entiti

Gunakan pembantu pengemas kini bersama patchState: setAllEntities, addEntity, updateEntity, removeEntity. Pembantu ini memastikan peta dan susunan id kekal selaras.

import { addEntity, removeEntity, updateEntity } from '@ngrx/signals/entities';

patchState(store, addEntity({ id: '1', title: 'A', done: false }));
patchState(store, updateEntity({ id: '1', changes: { done: true } }));
patchState(store, removeEntity('1'));

Memuatkan Koleksi

Gantikan seluruh koleksi selepas pengambilan data dengan setAllEntities, yang menormalkan tatasusunan menjadi peta dan id.

import { setAllEntities } from '@ngrx/signals/entities';

load: rxMethod<void>(pipe(
  switchMap(() => api.getTodos()),
  tap(todos => patchState(store, setAllEntities(todos)))
))

idKey Tersuai

Jika pengecam entiti anda bukan id, hantarkan pemilih. Gedung kemudiannya menggunakan medan tersebut sebagai kunci peta.

withEntities<User>(); // expects user.id
// custom key:
patchState(store, addEntity(user, { selectId: (u: User) => u.uuid }));

Menerbitkan Daripada Entiti

Gabungkan withEntities dengan withComputed untuk membina model bacaan yang ditapis atau dikira berdasarkan koleksi.

withComputed(({ entities }) => ({
  remaining: computed(() => entities().filter(t => !t.done).length)
}))

Apakah Ciri Tersuai

Ciri tersuai ialah himpunan keadaan, nilai terkomput dan kaedah yang boleh digunakan semula serta dimasukkan ke dalam banyak gedung. Cipta ciri dengan signalStoreFeature.

import { signalStoreFeature, withState } from '@ngrx/signals';

export function withLoading() {
  return signalStoreFeature(
    withState({ loading: false })
  );
}

Menggunakan Semula Ciri

Tambahkan ciri tersuai anda pada mana-mana gedung seperti ciri terbina dalam. Beginilah cara anda berkongsi keperluan rentas fungsi seperti bendera pemuatan atau penomboran.

export const TodoStore = signalStore(
  withLoading(),
  withEntities<Todo>()
);
// store.loading() now exists

Ciri dengan Kaedah

Ciri tersuai boleh menyertakan withMethods untuk mendedahkan tingkah laku yang boleh digunakan semula, seperti pembantu setLoading.

export function withLoading() {
  return signalStoreFeature(
    withState({ loading: false }),
    withMethods((store) => ({
      setLoading(loading: boolean) { patchState(store, { loading }); }
    }))
  );
}

Kebolehgubahan

Oleh sebab ciri hanyalah fungsi yang mengembalikan penerang ciri, anda boleh menyusun banyak ciri: withLoading(), withEntities(), serta keadaan khusus aplikasi, semuanya digabungkan menjadi satu gedung yang ditaip dengan kukuh.

Ciri Generik

Jadikan ciri generik supaya dapat berfungsi merentas jenis entiti. Parameter jenis mengalir melaluinya supaya pengguna kekal mendapat keselamatan jenis sepenuhnya.

export function withSelected<T>() {
  return signalStoreFeature(
    withState({ selected: null as T | null })
  );
}

Semakan Pantas

Uji pengetahuan anda tentang entiti dan ciri.

Jawab dalam pelajaran interaktif

Imbas Kembali

Anda telah mengurus koleksi dengan withEntities (peta ternormal, pembantu pengemas kini, model bacaan terbitan) dan membina himpunan signalStoreFeature yang boleh diguna semula serta generik untuk berkongsi keadaan, pengiraan dan kaedah merentas stor.

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 38
Pelajaran: 144

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Entiti dan Ciri Tersuai” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Angular Academy, termasuk “Entiti dan Ciri Tersuai”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Angular Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Entiti dan Ciri Tersuai”?

Urus koleksi dengan withEntities. Anda berlatih Angular Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Angular Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Angular Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.

Berapa lamakah pelajaran “Entiti dan Ciri Tersuai” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Angular Academy ini?

Ya. Setiap pelajaran Angular Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke Angular Academy