以下是一个使用Angular 6在表格中渲染嵌套的JSON的示例:
data.json
的文件,其中包含嵌套的JSON数据:{
"users": [
{
"id": 1,
"name": "John Doe",
"email": "john@example.com",
"address": {
"street": "123 Main St",
"city": "New York",
"state": "NY"
}
},
{
"id": 2,
"name": "Jane Smith",
"email": "jane@example.com",
"address": {
"street": "456 Elm St",
"city": "Los Angeles",
"state": "CA"
}
}
]
}
user.service.ts
的服务文件,读取data.json
文件并返回数据:import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class UserService {
private url = 'assets/data.json';
constructor(private http: HttpClient) {}
getUsers(): Observable {
return this.http.get(this.url);
}
}
user.component.ts
的组件文件,使用UserService
来获取用户数据:import { Component, OnInit } from '@angular/core';
import { UserService } from './user.service';
@Component({
selector: 'app-user',
templateUrl: './user.component.html',
styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {
users: any[];
constructor(private userService: UserService) {}
ngOnInit() {
this.userService.getUsers().subscribe(data => {
this.users = data.users;
});
}
}
user.component.html
的模板文件,使用ngFor
指令在表格中渲染用户数据:
ID
Name
Email
Street
City
State
{{ user.id }}
{{ user.name }}
{{ user.email }}
{{ user.address.street }}
{{ user.address.city }}
{{ user.address.state }}
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { UserComponent } from './user.component';
import { UserService } from './user.service';
@NgModule({
declarations: [UserComponent],
imports: [CommonModule, HttpClientModule],
providers: [UserService]
})
export class UserModule {}
现在,当你在应用中使用
标签时,将会在表格中显示嵌套的JSON数据。