Question

我在iconic 2中创建了一个名为toggle的自定义组件，但是无法正常工作

我已将代码拆分为组件，其中

这是toggle.ts

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

@Component({
  selector: 'data',
  templateUrl: 'toggle.html'
})
export class Data {
  constructor(public title: string, public details: string, public icon: string, public showDetails: boolean) {}
}

@Component({
  selector: 'toggle',
  inputs: ['data'],
  templateUrl: 'toggle.html'
})

export class Toggle {

  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';
    }
  }
}

My module.ts is this:

    import { NgModule } from '@angular/core';
    import { IonicApp, IonicModule } from 'ionic-angular';
    import { MyApp } from './app.component';
    import { HomePage } from '../pages/home/home';
    import { Data, Toggle } from '../components/toggle/toggle';

    @NgModule({
      declarations: [
        MyApp,
        HomePage,
        Data,
        Toggle
      ],
      imports: [
        IonicModule.forRoot(MyApp)
      ],
      bootstrap: [IonicApp],
      entryComponents: [
        MyApp,
        HomePage,
        Data,
        Toggle
      ],
      providers: []
    })
    export class AppModule {}

然后在我的主页上我有了这个

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Data, Toggle} from '../../components/toggle/toggle';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  public data: Data[];

  constructor(public navCtrl: NavController) {
    this.data = [
      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

<toggle [data]="dataList"></toggle>

我收到数据错误，因为它说无法找到数据，然后我通过这种方式解决它：

  data: Array<{title: string, details: string, showDetails: boolean, icon: string}>;

但我不明白为什么它没有得到数据。

此外我的列表显示有效，但当其中一个显示详细信息而我选择另一个选项时，第一个选项不会隐藏详细信息，我该如何解决？感谢

离子2组分

0 个答案: