我有一个返回 HashMap 的 REST API <String,<String,Integer>>
。我需要使用这个 Hashmap Json 在 Angular 5 中显示一个表。到目前为止我已经尝试了以下操作,但该表仍然是空的。我不太确定如何在 HTML 文件中正确访问模型类中的嵌套对象。我哪里出错了?
这是我定义了 HashMap 结构的 Frequency-table.model.ts 文件。
export interface FrequencyTable {
obj: {
key: String;
val: {
key_in: String;
val_in: Number;
};
}
}
这是 HTML 文件
<div class="container">
<div class="row">
<table class="table">
<thead class="thead-inverse">
<tr>
<th class="text-center">Thread Name</th>
<th class="text-center">Query</th>
<th class="text-center">Frequency</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let post of _postsArray">
<td class="text-center" style="width: 15px;">{{post.key}}</td>
<td class="text-center" style="width: 15px;">{{post.val.key_in}}</td>
<td class="text-center" style="width: 200px;">{{post.val.val_in}}</td>
</tr>
</tbody>
</table>
</div>
这是Frequency-table.component.ts文件
export class FrequencyTableComponent implements OnInit {
_postsArray: FrequencyTable[];
constructor(private tableService: TableService) { }
getPosts(): any {
this.tableService.getPosts()
.subscribe(
resultArray => this._postsArray = resultArray,
error => console.log("Error :: " + error)
)
}
ngOnInit() {
}
这是service.ts文件
@Injectable()
export class TableService {
constructor(private http: HttpClient) {}
getPosts(): Observable<FrequencyTable[]> {
return this.http
.get('\getQueryCount')
.map((response: Response) => {
return <FrequencyTable[]>response.json();
})
.catch(this.handleError);
}
private handleError(error: Response) {
return Observable.throw(error.statusText);
}
}
这是返回 Hashmap json 的 REST API:
@RestController
public class QueryCounterController{
@Autowired
ReadFileService rfservice;
@GetMapping("/getQueryCount")
@ResponseBody
public Map<String, Object> getQueryCount() throws IOException{
String filename = "file.txt";
return (rfservice.readFile(filename));}
}
示例 Json:
{
"key1": {
"xyz": 3,
"abc": 2
},
"key-2": {
"pqr": 3,
"uvw": 2
}
}
最佳答案
我通过进行以下更改解决了该问题:
频率表.component.ts
export class FrequencyTableComponent implements OnInit {
_postsArray: Array<any> = [];
constructor(private tableService: TableService) { }
ngOnInit() {
this.tableService.getPosts().subscribe((data: any) => {
console.log(data);
Object.keys(data).forEach(key => {
var obj1 = data[key];
console.log('key is ' + key);
Object.keys(obj1).forEach(key1 => {
console.log('key inner is ' + key1 + ' val is ' + obj1[key1]);
this._postsArray.push({k: key, l: key1, m: obj1[key1]});
})
});
console.log('array is ' + this._postsArray.toString());
});
}
频率表.service.ts
@Injectable()
export class TableService {
constructor(private http: HttpClient) {}
getPosts(): any {
return this.http.get('/getQueryCount');
}
频率表.component.html
<div class="container">
<div class="row">
<table class="table">
<thead class="thead-inverse">
<tr>
<th class="text-center">Thread Name</th>
<th class="text-center">Query</th>
<th class="text-center">Frequency</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let post of _postsArray">
<td class="text-center" style="width: 15px;">{{post.k}}</td>
<td class="text-center" style="width: 15px;">{{post.l}}</td>
<td class="text-center" style="width: 200px;">{{post.m}}</td>
</tr>
</tbody>
</table>
</div>
我暂时删除了 Frequency-service.model.ts 类。现在我得到了想要的 table 。感谢@SEY_91的帮助。
关于java - 显示来自 REST API 的 Hashmap json,作为 Angular 5 中的表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49625658/