[Angular] 笔记 11:可观察对象(Observable)

chatgpt:

在 Angular 中,Observables 是用于处理异步数据流的重要工具。它们被广泛用于处理从异步操作中获取的数据,比如通过 HTTP 请求获取数据、定时器、用户输入等。Observables 提供了一种机制来订阅这些数据流,并可以在数据到达时执行相应的操作。其优势在于能够处理异步操作、多个事件以及数据的转换和组合,使得对数据流的处理更为灵活和高效。在 Angular 中,Observables 常用于处理 HTTP 请求、与路由、表单和事件处理等方面。


当涉及 Observable,20%的知识覆盖了80%的应用场景。

Observable在代码中被广泛应用于异步操作。

异步操作在前端确保 UI 界面不会冻结,在后端能够提高系统性能。

Observer 和 Observable 之间的关系:

接下来安装一个用于测试的后端: json-server.

vscode terminal 运行: npm i -g json-server,这里必须有 -g,否则后面的 json-server 命令会无法识别。

然后在项目的根目录 创建文件 db.json

db.json 文件内容:

json 复制代码
{
  "pokemon": [
    {
      "id": 1,
      "name": "pikachu",
      "type": "electric",
      "isCool": false,
      "isStylish": true
    },
    {
      "id": 2,
      "name": "squirtle",
      "isCool": true,
      "isStylish": true
    },
    {
      "id": 3,
      "name": "charmander",
      "type": "fire",
      "isCool": true,
      "isStylish": false
    }
  ]
}

vscode terminal 运行命令:

json-server --watch db.json

sh 复制代码
PS D:\Angular\my-app> json-server --watch db.json

  \{^_^}/ hi!

  Loading db.json
  Done

  Resources
  http://localhost:3000/pokemon

  Home
  http://localhost:3000

访问 http://localhost:3000/pokemon,可以看到用于测试的数据:

pokeman-base.module.ts 文件中 import HttpClientModule:

ts 复制代码
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PokemonListComponent } from './pokemon-list/pokemon-list.component';
import { PokemonDetailComponent } from './pokemon-detail/pokemon-detail.component';
import { PokemonService } from '../services/pokemon.service';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [PokemonListComponent, PokemonDetailComponent],
  imports: [CommonModule, HttpClientModule],  // Add HttpClientModule!!!
  exports: [PokemonListComponent, PokemonDetailComponent],
  providers: [PokemonService],
})
export class PokemonBaseModule {}

接下来访问 http client, pokemon.service.ts:

ts 复制代码
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http'; // 新增 import
import { Pokemon } from '../models/pokemon';
import { Observable } from 'rxjs';

// endpoint
const POKEMON_API = 'http://localhost:3000/pokemon';

@Injectable({
  providedIn: 'root',
})
export class PokemonService {
  constructor(private http: HttpClient) {}

  getPokemons(): Observable<Pokemon[]> {
    return this.http.get<Pokemon[]>(POKEMON_API);
  }
}

pokeman-list.component.ts:

ts 复制代码
import { Component, OnInit } from '@angular/core';
import { Pokemon } from 'src/app/models/pokemon';
import { PokemonService } from 'src/app/services/pokemon.service';

@Component({
  selector: 'app-pokemon-list',
  templateUrl: './pokemon-list.component.html',
  styleUrls: ['./pokemon-list.component.css'],
})
export class PokemonListComponent implements OnInit {
  pokemons!: Pokemon[];

  // 修改 constructor
  constructor(private pokemonService: PokemonService) {}

  handleRemove(event: Pokemon) {
    this.pokemons = this.pokemons.filter((pokemon: Pokemon) => {
      return pokemon.id !== event.id;
    });
  }

  ngOnInit(): void {
    // 填充 pokemons 属性
    // this.pokemons = this.pokemonService.getPokemons();
    this.pokemonService.getPokemons().subscribe((data: Pokemon[])=>{
      console.log(data)
      this.pokemons = data;
    })
  }
}

运行 ng serve:


Angular for Beginners

相关推荐
耶啵奶膘24 分钟前
uniapp-是否删除
linux·前端·uni-app
Nu11PointerException1 小时前
JAVA笔记 | ResponseBodyEmitter等异步流式接口快速学习
笔记·学习
王哈哈^_^2 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
亦枫Leonlew2 小时前
三维测量与建模笔记 - 3.3 张正友标定法
笔记·相机标定·三维重建·张正友标定法
考试宝2 小时前
国家宠物美容师职业技能等级评价(高级)理论考试题
经验分享·笔记·职场和发展·学习方法·业界资讯·宠物
cs_dn_Jie2 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic3 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿3 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具4 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
黑叶白树4 小时前
简单的签到程序 python笔记
笔记·python