离子通过 NavParams 将复杂对象传递给模态答案

【问题标题】：Ionic passing complex object to a Modal via NavParams离子通过 NavParams 将复杂对象传递给模态
【发布时间】：2017-10-13 23:59:28
【问题描述】：

我有一个 Ionic 页面，我正在尝试将一个对象数组传递给我的模态页面：

export class SelectAddress{
    constructor(
        public id : string,
        public number : string,
        public line1 : string,
        public postcode: string
    ){}
}

我正在尝试通过我的 Ionic 页面上的以下代码执行此操作：

  let modal = this.modalControl.create(SelectAddressPage, {addresses: this.addressResult as Array<SelectAddress>});
  modal.present();

在 Modal 上，我正在尝试使用以下代码检索数据：

constructor(
          public platform: Platform,
          public params: NavParams,
          public viewCtrl: ViewController){
this.addresses = params.get('addresses') as Array<SelectAddress>;

随后在尝试遍历结果时，我收到一条错误消息：

未捕获（承诺中）：错误：找不到不同的支持对象 “对象”类型的“[对象对象]”。 NgFor 只支持绑定到可迭代对象，例如数组。错误：找不到不同的支持 “对象”类型的对象“[对象对象]”。 NgFor 只支持绑定到数组等可迭代对象。

似乎我可以愉快地发送原始数据类型，如整数和字符串，但任何更复杂的东西似乎在这里都不起作用。

最初，在我的 ModalControl 上，我尝试注入我的 AddressService 以检索数据，但是当我尝试这样做时，依赖注入器无法注入依赖。

我应该尝试通过 navParams 发送复杂类型，还是应该尝试其他方法？

【问题讨论】：

标签： typescript ionic-framework

【解决方案1】：

我认为您的问题是您正在尝试使用打字稿class 进行类型断言。要通过较旧的类型断言 (let x = <Type> getX();) 或较新的 as 运算符 (let x = getX() as Type) 确保变量属于特定类型，您需要定义 interface 或 type：

export interface SelectAddress {
  id: string;
  number: string;
  line1: string;
  postcode: string;
}

export type SelectAddress = {
  id: string;
  number: string;
  line1: string;
  postcode: string;
}

Typescript 类型通常是编译时构造，在运行时不存在，因此当您运行应用程序时，实际上总是传递一个 javascript 原始类型。

【讨论】：

嗨大卫，我和你一样创建了界面，当我进行投射时，我已经指定了界面类型。不幸的是，在运行该应用程序时，我收到了相同的错误消息。有任何想法吗？例如，我有“this.addressResult as Array”
其实我只是个白痴。我需要的正确代码是 this.addressResult.addresses as Array。无论如何，谢谢你的帮助，我不敢相信我是多么愚蠢。即使在使用类时它也能正常工作。

【解决方案2】：

我得到的错误仅仅是因为我尝试转换的类型不匹配，因为我引用了错误的变量。

这就是我的本意：

let modal = this.modalControl.create(SelectAddressPage, {addresses: this.addressResult.addresses as Array<SelectAddress>});

this.addressResult.addresses，而不是this。addressResult

我太傻了。

【讨论】：