在Angular 6中,您可以使用rxjs的Observable来维护可观察的JSON属性顺序。以下是一个示例解决方法:
jsonService.ts
的新服务文件,并在其中定义一个名为getJsonData()
的方法。该方法将返回一个Observable对象,该对象将发出具有特定顺序的JSON属性。import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class JsonService {
private jsonData = {
name: 'John',
age: 25,
country: 'USA'
};
getJsonData(): Observable {
// 通过返回Observable对象,可以在组件中订阅此方法以获取JSON数据
return new Observable(observer => {
setTimeout(() => {
observer.next(this.jsonData); // 发出JSON数据
observer.complete();
}, 1000);
});
}
}
jsonComponent.ts
的新组件文件,并在其中注入jsonService
作为依赖项。在组件类中,使用jsonService.getJsonData()
方法来获取可观察的JSON数据,并使用subscribe()方法订阅它。import { Component, OnInit } from '@angular/core';
import { JsonService } from './jsonService';
@Component({
selector: 'app-json',
templateUrl: './jsonComponent.html'
})
export class JsonComponent implements OnInit {
jsonData: any;
constructor(private jsonService: JsonService) { }
ngOnInit() {
this.jsonService.getJsonData().subscribe(data => {
this.jsonData = data;
console.log(this.jsonData); // 打印可观察到的JSON数据
});
}
}
Name: {{ jsonData?.name }}
Age: {{ jsonData?.age }}
Country: {{ jsonData?.country }}
现在,当组件加载时,它将通过订阅jsonService.getJsonData()
方法来获取可观察的JSON数据,并在模板中显示它。请注意,由于Observable是异步的,因此在模板中使用了安全导航运算符(?.
)来避免在数据未加载完成时出现错误。