Java / Angular: 键值管道不显示从后端发送的数据

Question

我正在尝试设置一个应用程序，其中后端从 api 接收数据并将其处理到前端。 api 是 https://www.travel-advisory.info/api

长话短说：由于某种原因，我似乎在前端接收到数据，但我无法将其显示在 table 或列表中。

作为第一步，我想获取所有数据，并且由于我最终想让它持久化，所以我已经在使用 Spring 和 get 方法。我的控制器在 Java:

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import com.savetravel.SaveTravel.TravelWarning.TravelWarningObject;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.JsonMappingException;


import org.springframework.web.client.RestTemplate;

@RestController
@RequestMapping("/gettravelwarnings")
public class TravelWarningController {
    
    @GetMapping("/alltw")
    public TravelWarningObject getAllTravelWarnings()
            throws JsonMappingException, JsonProcessingException {
        
        RestTemplate restTemplate = new RestTemplate();
        TravelWarningObject allTravelWarnings = new TravelWarningObject();
        
        ResponseEntity<TravelWarningObject> responseEntity = restTemplate.getForEntity(
                "https://www.travel-advisory.info/api", TravelWarningObject.class);
        allTravelWarnings = responseEntity.getBody();
    
        return allTravelWarnings;
                
    }
}

我在 Java 中的模型：

package com.savetravel.SaveTravel.TravelWarning;

import java.util.HashMap;

public class TravelWarningObject {

    private Api_status api_status;
    private HashMap<String, CountryCode> data;

public TravelWarningObject () {
    
}

public HashMap<String, CountryCode> getData() {
    return data;
}

public void setData(HashMap<String, CountryCode> data) {
    this.data = data;
}

public Api_status getApi_status() {
    return api_status;
}

public void setApi_status(Api_status api_status) {
    this.api_status = api_status;
}

}

和

package com.savetravel.SaveTravel.TravelWarning;


public class CountryCode {

    private String iso_alpha_2;
    private String name;
    private String continent; 
    private Advisory advisory;
    
    public CountryCode() {
        
    }
    
    public CountryCode(String iso_alpha_2, String name, String continent,
            com.savetravel.SaveTravel.TravelWarning.Advisory advisory) {
        super();
        this.iso_alpha_2 = iso_alpha_2;
        this.name = name;
        this.continent = continent;
        this.advisory = advisory;
    }

    public String getIso_alpha_2() {
        return iso_alpha_2;
    }

    public void setIso_alpha_2(String iso_alpha_2) {
        this.iso_alpha_2 =  iso_alpha_2;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getContinent() {
        return continent;
    }

    public void setContinent(String continent) {
        this.continent = continent;
    }

    public Advisory getAdvisory() {
        return advisory;
    }

    public void setAdvisory(Advisory advisory) {
        this.advisory = advisory;
    }
            
}

嗯...使用相同的模式我还有对象“Advisory.java”、“Api_status.java”、“Reply.java”、“Request.java” .在我的 Angular 项目中，类似地，我在 .ts 中有相同的模型。另外，我有这项服务：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { TravelWarningObject } from '../Models/TravelWarningObject';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class CountryDataServiceService {

  constructor(private http: HttpClient) { }

rootApiPath:string = "http://localhost:8080/gettravelwarnings"


public getAllTWs(): Observable<TravelWarningObject> {
return this.http.get<TravelWarningObject>(this.rootApiPath + "/alltw");

}
}

..这个组件：

import { Component, OnInit } from '@angular/core';
import { CountryDataServiceService } from '../service/country-data-service.service';
import { TravelWarningObject } from '../Models/TravelWarningObject';
import { CountryCode } from '../Models/CountryCode';

@Component({
  selector: 'app-all-travel-warnings',
  templateUrl: './all-travel-warnings.component.html',
  styleUrls: ['./all-travel-warnings.component.css']
})
export class AllTravelWarningsComponent implements OnInit {


travelWarningObject = new TravelWarningObject;

  constructor(private countryDataService: CountryDataServiceService) { }

  ngOnInit(): void {

    this.countryDataService.getAllTWs().subscribe(fetchedTWO => (this.travelWarningObject = fetchedTWO));
           
  }

}

并在 html 中：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

<table border="1">

<thead>
    <tr>
<th>Country</th>
<th>Code</th>
</tr>
</thead>
    <tbody>
    <tr *ngFor = "let value of travelWarningObject.data | keyvalue">
        <td>{{value.name}}</td>
        <td>{{value.iso_alpha2}}</td>
    </tr>
</tbody>
</table>


{{travelWarningObject | json }}
<br />
--------
<br />
{{travelWarningObject.data | json }}
<br />

</body>
</html>

现在有趣的是，当我运行 Spring 引导和 ng 服务时，json 管道完美地显示了来自 api 的所有数据。但是，table 中没有数据。尽管如此，这对我来说是最令人困惑的事情，table 显示在 localhost:4200 上的浏览器中，它具有正确的行数但没有内容。

我没有收到任何错误消息，无论是在我的浏览器的开发工具中还是在 bash。

感谢您的帮助，如果您需要任何其他信息，我很乐意提供！

Linux version 4.8.0-53-generic (buildd@lgw01-56) (gcc version 5.4.0 20160609 (Ubuntu 5.4.0-6ubuntu1~16.04.4) ) #56~16.04.1-Ubuntu SMP Tue May 16 01:18:56 UTC 2017
------
openjdk version "13.0.1-BellSoft" 2019-10-15
------
Angular CLI: 9.0.6
Node: 10.22.0

Answer 1

顾名思义Keyvalue，即returnskey和value。像下面这样使用它得到你的结果。

<tr *ngFor = "let item of travelWarningObject.data | keyvalue">
    <td>{{item.key}}</td>
    <td>{{item.value.iso_alpha2}}</td>
</tr>

Java / Angular: 键值管道不显示从后端发送的数据

Java / Angular: keyvalue pipe doesn't show data sent from backend

java

angular

key-value

angular-maps