Làm việc với RxJS & Angular

Trong chương này, chúng ta sẽ xem cách sử dụng RxJs với Angular. Chúng tôi sẽ không đi sâu vào quá trình cài đặt Angular ở đây, để biết về Cài đặt Angular, hãy tham khảo liên kết này -https://www.tutorialspoint.com/angular7/angular7_environment_setup.htm

Chúng tôi sẽ trực tiếp làm việc trên một ví dụ, nơi sẽ sử dụng Ajax từ RxJS để tải dữ liệu.

Thí dụ

app.component.ts

import { Component } from '@angular/core';
import { environment } from './../environments/environment';
import { ajax } from 'rxjs/ajax';
import { map } from 'rxjs/operators'

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = '';
   data;
   constructor() {
      this.data = "";
      this.title = "Using RxJs with Angular";
      let a = this.getData();
   }
   getData() {
      const response =
      ajax('https://jsonplaceholder.typicode.com/users')
         .pipe(map(e => e.response));
      response.subscribe(res => {
         console.log(res);
         this.data = res;
      });
   }
}

app.component.html

<div>
   <h3>{{title}}</h3>
   <ul *ngFor="let i of data">
      <li>{{i.id}}: {{i.name}}</li>
   </ul>
</div>

<router-outlet></router-outlet>

Chúng tôi đã sử dụng ajax từ RxJS sẽ tải dữ liệu từ url này -https://jsonplaceholder.typicode.com/users.

Khi bạn biên dịch, màn hình hiển thị như hình dưới đây -