下面是一个使用Angular 9从通过REST API获取的嵌套JSON中显示数据的示例解决方法:
首先,确保已经安装了Angular CLI并创建了一个新的Angular项目。
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
data: any;
constructor(private http: HttpClient) { }
ngOnInit() {
this.http.get('https://example.com/api/data').subscribe(data => {
this.data = data;
});
}
}
{{ data.title }}
- {{ item.name }}
在上述代码中,我们首先使用HttpClient模块发送HTTP GET请求来获取嵌套JSON数据。然后,我们在组件的模板中使用Angular的数据绑定来显示获取到的数据。请注意,我们使用*ngIf指令来检查数据是否已经加载,以避免在数据未加载完成之前显示空数据。
这就是一个简单的示例,你可以根据自己的需求进行进一步的处理和修改。