在Angular应用中,当我们使用API请求从服务器获取数据时,有时可能需要通过重新加载变量来更新页面。但是,由于Angular Observable是基于事件驱动的异步编程模型,因此我们需要使用subscribe来注册observable并观察响应结果。但有时候,即使observable发出更新事件,subscribe也无法重新加载变量。这时候,我们可以采用以下方法解决:
import { Component } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Observable } from 'rxjs';
@Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ './app.component.css' ] }) export class AppComponent { data: any;
constructor(private http: HttpClient) {}
getData(): Observable
ngOnInit() { this.getData().subscribe( data => { this.data = data; // 将响应结果赋值给变量“data” }, error => console.error(error) ); }
这样,当API响应发生变化时,组件中的变量“data”也会更新。注意,在HTML模板中使用“data”变量时,需要进行空值校验,以防止错误出现。
示例代码:https://stackblitz.com/edit/angular-api-request-reload-variable?file=src/app/app.component.ts