来自 json 的数据未填充到我的 Angular 8 应用程序中答案

【问题标题】：The data from json is not populated in my angular 8 app来自 json 的数据未填充到我的 Angular 8 应用程序中
【发布时间】：2020-01-11 14:15:29
【问题描述】：

我的 json 如下所示：

    {
    "content": [
        {
            "id": 1,
            "name": "test name",
            "email": "test@test.com",
            "img_url": "url",
            "field1": [
                {
                    "id": 10,
                    "userId": 1,
                    "registeredAt": "2020-01-09T22:21:23.272",
                    "amount": 200
                }
            ],
            "field2": [
                {
                    "id": 11,
                    "userId": 1,
                    "registeredAt": "2020-01-09T22:21:46.113",
                    "amount": 200
                }
            ],
            "creationDateTime": "2020-01-05T00:00:00Z"
        }
    ],
    "page": 0,
    "size": 30,
    "totalElements": 1,
    "totalPages": 1,
    "last": true
}

我想用它填充我的angular 8 网站。

在我的api.service.ts 我有：

getMyStructure(): Observable<HttpResponse<MyStructure[]>> { 
    return this.http.get<MyStructure[]>( 
        localUrl, { observe: 'response' }); 
}

在app.components.ts 我有：

myStructure: MyStructure[] = []; 

getMyStructure() { 
    this.api.getMyStructure() 
    .subscribe(function(resp) { 
        console.log(resp.body.length); //this prints undefined 
        console.log(resp.body) // this prints {content: Array, page: 0, size: 30, totalElements: 1, totalPages: 1, …} 
        this.myStructure = resp.body; 
    }); 
    console.log("after"); 
    console.log(this.myStructure.length); //this prints 0

现在，myStructure 是一个接口，其中包含：

export interface Shelter {
    id: number;
    name: string;
    email: string;
    img_url: string;
    field1: string[];
    field2: string[];
    creationDateTime: string;
}

但myStructure 中的数据不知何故未填充。我不知道为什么，你能帮我吗？

【问题讨论】：

标签： javascript json angular angular8

【解决方案1】：

您需要在代码的subscribe部分添加console.log，否则当它首先执行时，您将看到它为0。将其更改为，

.subscribe(function(resp) { 
        console.log(resp.body.length); //this prints undefined 
        console.log(resp.body) // this prints {content: Array, page: 0, size: 30, totalElements: 1, totalPages: 1, …} 
        this.myStructure = resp.body; 
        console.log("after"); 
        console.log(this.myStructure.length);  
    });

编辑：

我看到你想在前端显示内容数组，所以你需要将数据分配为，

 this.myStructure = resp.body.content;

【讨论】：

好的，这是有道理的，但它仍然不会将数据填充到前端。在我的app.component.html 中，我有代码：<ul><li *ngFor="let product of myStructure"><h2>{{product.name}} / ${{product.email}}</h2></li></ul>，即使我在控制台中看到来自 console.log 的数据，我也没有在 html 代码中看到它。你知道为什么吗？
谢谢你的回答，但是当我把resp.body.content这个项目没有编译时，有一个错误TS2339: Property 'content' does not exist on type 'MyStructure[]'.我认为是因为api.service.ts中声明了getMyStructure方法-我不知道我应该如何改变它
更改订阅（函数（resp：任何）{
谢谢，我改了，项目编译好了，但是html里面还是看不到任何数据，不知道为什么:|似乎 html 文件 (myStructure) 中的数据为空:(
能否打印console.log(resp.body)的响应；

【解决方案2】：

您的 API 不返回 MyStructure[] 它返回：

请为界面选择一个更好的名称

interface SomeStructure {
  content: MyStructure[];
  page: number;
  size: number;
  totalElements: number;
  totalPages: number;
  last: boolean
}

api.service.ts

getMyStructure(): Observable<HttpResponse<SomeStructure>> { 
    return this.http.get<SomeStructure>( 
        localUrl, { observe: 'response' }); 
}

app.component.ts

myStructure: MyStructure[] = []; 

getMyStructure() { 
    this.api.getMyStructure() 
    .subscribe((resp) => { 
        this.myStructure = resp.body.content; 
    }); 
}

注意订阅.subscribe((resp) => {中的箭头函数

【讨论】：

嗯，这是有道理的......顺便说一句。你确定 api.service.ts 中应该有 return this.http.get<MyStructure[]> 而不是 return this.http.get<SomeStructure> 吗？