Latihan 1: RxJS Dasar — Angular

Latihan 1 dari materi RxJS Dasar di Angular — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Starter-nya sudah punya import of dari 'rxjs' dan map dari 'rxjs/operators', template <p>{{ result }}</p>, properti result = '', dan constructor yang masih kosong. Biarkan semuanya, lalu di dalam constructor:

Buat sumbernya dari satu teks: of('angular').
Ubah jadi huruf besar di dalam rantainya: .pipe(map((val) => val.toUpperCase())).
Tangkap nilai yang keluar ke properti: .subscribe((val) => (this.result = val)).

Yang dicek:

<p> berbunyi persis ANGULAR.
Kodenya memanggil subscribe, dan nilai yang ditampilkan diambil dari parameter callback-nya ((val) => (this.result = val)), bukan diketik langsung.
Huruf besarnya dikerjakan pada nilai yang mengalir: lewat pipe(map(...)) seperti di langkah 2 (mengubahnya di dalam subscribe juga diterima).

Hint

of mengalirkan satu nilai, pipe mengolahnya di tengah jalan, dan baru subscribe yang menerima hasilnya. Tanpa subscribe, gak ada yang jalan dan result tetap kosong.
Di constructor: of('angular'), lalu .pipe(map(...)) yang memanggil toUpperCase(), lalu .subscribe(...) yang menyimpan nilainya ke this.result.
of('angular').pipe(map((val) => val.toUpperCase())).subscribe((val) => (this.result = val))

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: RxJS Dasar — Angular

Hint

Memperbarui Aplikasi