Ionic 4 angular data.map 不是函数

Question

我正在尝试将来自我的 http 请求的响应存储到模型中。我遵循 this 指南并设法将数据传递到模型中。但是我认为我做错了，因为我无法在 html 上显示它，而且我从控制台看到的输出有点混乱。

我认为我的错误在于访问 json 响应，但我似乎找不到错误。谁能帮我指出错误？

我的模型。

// data.model.ts
import { Fruits } from './fruitsId.model';
import { Deserializable } from './deserialize.model';

export class Data implements Deserializable {
  data: Fruits[];

  deserialize(input: any): this {
    Object.assign(this, input);
    this.data = input.data.map(data => new Fresh().deserialize(data));

    return this;
  }
}

// fruits.model.ts
import { Deserializable } from './deserialize.model';
import { FruitsId } from './fruitsId.model';
import { CustomerId } from './customerId.model';
import { StoreId } from './storeId.model';

export class Fresh implements Deserializable {
    public fruitsId: FruitsId;
    public time: string;
    public customerId: CustomerId;
    public storeId: StoreId;
    public name: string;
    public text: string;

    deserialize(input: any): this {
    Object.assign(this, input);
    this.fruitsId = new FreshId().deserialize(input.freshId);
    this.customerId = new HumanId().deserialize(input.humanId);
    this.storeId = new MasterId().deserialize(input.masterId);

    return this;
    }
}

// fruitsId.model.ts
import { Deserializable } from './deserialize.model';

export class FruitsId implements Deserializable {
    type: string;
    id: string;

    deserialize(input: any): this {
       return Object.assign(this, input);
    }
}

后接customerId.model.ts和storeId.model.ts，格式与freshId.model.ts相同。

我的服务。

// fruits.service.ts
public getAllThings(): Observable<any> {
// Some httpOptions here
// ...
return this.http
  .get(`${this.url}`, httpOptions)
  .pipe(
    // ERROR HERE: data.map is not a function
    map(data => data.map(data => new Data().deserialize(data))),
  );
}

来自 HTTP GET 的示例响应。

{
  "data": [
    {
      "id": {
        "type": "red",
        "id": "123"
      },
      "time": 1579677349193,
      "customerId": {
        "type": "retailer",
        "id: "234"
      },
      "storeId": {
        "type": "abc Store",
        "id": "001"
      },
      "name": "Apple",
      "text": "very delicious"
    }
  ]
}

终于在home.page.ts

// Some imports
// ...

export class DashboardPage implements OnInit {

  fruitsList: any = [];
  data: Data[];

  constructor(private fruitsService: FruitsService) { }

  ionViewWillEnter() {
    this.getFruits();
  }

  getFruits() {
    this.fruitsService.getFreshes().subscribe(
      res => this.data = res
    );
  }

}

Answer 1

这里是指南的作者。

您的响应不是数组，但对响应调用 .map 正是假定了这一点。查看您的响应，正确的反序列化将是

map(response => response.data.map(...))

因为 data 只是将实际数据保存在 data 属性.

中的整个响应

您始终可以通过将 lambda 函数替换为以下内容来查看响应的形状：

map(response => {
  console.log(response);
  return response.data.map(...);
})

Ionic 4 angular data.map 不是函数

Ionic 4 angular data.map is not a function

model

typescript

angular

ionic4