📜  使用RxJS和Angular

📅  最后修改于: 2020-10-20 05:37:10             🧑  作者: Mango


在本章中,我们将看到如何在Angular中使用RxJ。我们不会在这里进入Angular的安装过程,要了解有关Angular安装的信息,请参考以下链接-https: //www.tutorialspoint.com/angular7/angular7_environment_setup.htm

我们将直接处理一个示例,在该示例中,将使用RxJS中的Ajax加载数据。

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

{{title}}

  • {{i.id}}: {{i.name}}

我们使用了RxJS的ajax,它将从该URL- https: //jsonplaceholder.typicode.com/users加载数据。

编译时,显示如下所示-

带有Angular的RxJ