离子2中的手风琴列表

Question

我在iconic 2中创建了一个名为Accordion的自定义组件，可以在浏览器中完美工作，但在设备上无法工作。

我已经将代码分解为多个组件，其中

Home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import {DataCards} from '../../components/data-cards/data-cards';
import {Data} from '../../components/data/data';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  public dataList: Data[];
  constructor(public navCtrl: NavController) {
    this.dataList = [
      new Data('title 1', 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. ','ios-remove-circle-outline', true),
      new Data('title 2', 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. ','ios-add-circle-outline', false),
      new Data('title 3', 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. ','ios-add-circle-outline', false)
    ];
  }
}

以及相应的HTML

<ion-content padding>
  <data-cards [data]="dataList"></data-cards>
</ion-content>

包含我的自定义组件data-cards。data-cards具有输入参数data，数据列表通过该输入参数传递。

data.ts

import { Component } from '@angular/core';
@Component({
  selector: 'data',
  templateUrl: 'data.html'
})
export class Data {
  constructor(public title: string, public details: string, public icon: string, public showDetails: boolean) {}
}

data-cards.ts

import { Component } from '@angular/core';
import { Data } from '../data/data';
@Component({
  selector: 'data-cards',
  inputs: ['data'],
  templateUrl: 'data-cards.html'
})
export class DataCards {
  public data: Data[];
  constructor() {}
  toggleDetails(data: Data) {
    if (data.showDetails) {
        data.showDetails = false;
        data.icon = 'ios-add-circle-outline';
    } else {
        data.showDetails = true;
        data.icon = 'ios-remove-circle-outline';
    }
  }
}

app.module.ts

import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { Data } from '../components/data/data';
import { DataCards } from '../components/data-cards/data-cards';
@NgModule({
  declarations: [
    MyApp,
    HomePage,
    Data,
    DataCards
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    Data,
    DataCards
  ],
  providers: []
})
export class AppModule {}

当在iOS(ionic run ios(上运行时，我出现了如下错误：

[08:44:54]  Error: Error at /Users/imac/Documents/ionic2Accordion/.tmp/components/data/data.ngfactory.ts:29:71 
[08:44:54]  Property 'string' does not exist on type 'typeof "/path/ionic2Accordion/.tmp/components/data/data"'. 
[08:44:54]  Error at /path/ionic2Accordion/.tmp/components/data/data.ngfactory.ts:29:111 
[08:44:54]  Property 'string' does not exist on type 'typeof "/path/ionic2Accordion/.tmp/components/data/data"'. 
[08:44:54]  Error at /path/ionic2Accordion/.tmp/components/data/data.ngfactory.ts:29:151 
[08:44:54]  Property 'string' does not exist on type 'typeof "/path/ionic2Accordion/.tmp/components/data/data"'. 
[08:44:54]  Error at /path/ionic2Accordion/.tmp/components/data/data.ngfactory.ts:29:191 
[08:44:54]  Property 'boolean' does not exist on type 'typeof "/path/ionic2Accordion/.tmp/components/data/data"'. 
[08:44:54]  ngc failed 
[08:44:54]  ionic-app-script task: "build" 
[08:44:54]  Error: Error 

所以我的问题是：我该如何解决这个问题？有什么建议吗

Answer 1

在数据卡中。ts更改

public data: Data[];

o是

Input() data: Data[]; 

因为您将从home.html中的组件创建中指定它？您还需要通过导入输入模块

import { Component, Input } from '@angular/core';