Angular 不显示从 http 响应收到的数据

Question

我有一个服务类型脚本 class 如下：

export class HomeApiService{

apiURL = 'http://localhost:8080/api';

constructor(private http: HttpClient) {}

getProfileData():Observable<HomeModelInterface[]>{
        return this.http.get<HomeModelInterface[]>(this.apiURL+'/home');}
}

我有组件 class 如下：

export class HomeComponent implements OnInit {

public profileData: HomeModelInterface[] | undefined ;

constructor(private homeApiService:HomeApiService) { }

ngOnInit() {
 this.homeApiService.getProfileData().subscribe(data=> {
   this.profileData = data;
   console.log(this.profileData);
});
}

我有 html 文件如下：

<div *ngFor="let profile of profileData">
 <h1>{{profile.data}}</h1>
</div>

这是后端 spring 启动应用程序 controller：

@RequestMapping(value = "/api/home" , method = RequestMethod.GET, produces = 
  "application/json")
 public Object getHome() {
    ResponseHome response = new ResponseHome();
    response.setData(new String[]{"Greetings from Spring Boot API home!", 
  HttpStatus.ACCEPTED.toString()});
    return response;
   }

这是我的 ResponseHome java class：

public class ResponseHome {

private String data[];
private String errors[];

public String[] getData() {
    return data;
}

public void setData(String[] data) {
    this.data = data;
}

public String[] getErrors() {
    return errors;
}

public void setErrors(String[] errors) {
    this.errors = errors;
}
}

Here is my frontend model typescript class to parse that json to a model class:

export interface HomeModelInterface{
data: string[];
errors: string[];
}

当我运行它 chrome 时，我看到以下错误：找不到不同的支持 object '[object Object]' of type 'object'

你能帮忙吗？

Answer 1

您的数据是 object 而不是数组。 为了迭代，您应该获取其中的列表。 在 *ngFor 中尝试类似 profileData.data 的东西。