48479

Accordion List within ionic 2

Question:

I've create a custom <strong>components</strong> named <strong>Accordion</strong> within iconic 2 and working in browser perfectly but on device not working.

<strong>I've split my code up into components, where</strong>

<strong>Home.ts</strong>

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) ]; } }

and the corresponding HTML

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

contain my custom component data-cards. data-cards has an input parameter data, through which the list of data is passed.

<strong>data.ts</strong>

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) {} }

<strong>data-cards.ts</strong>

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

<strong>app.module.ts</strong>

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 {}

When run on iOS ( ionic run ios ) i've got an error like below :

[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

so my question : <strong>how i can resolve this problem any suggestion ?</strong>

Answer1:

In <strong>data-card.ts</strong> change

public data: Data[];

o be

Input() data: Data[];

since you will be assigning it from the component creation in the home.html? You'll also need to import the Input module via

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

Recommend

  • Fade in/out and pause on mouse over with jQuery
  • Bootstrap center align two blocks of text vertically
  • FactoryGirl factory with Trait(s) that returns a Hash with stringed keys
  • Perform function on form submit
  • Jquery - Break/Prevent each loop
  • jquery: how to find an element which is coming 2 elements before current element
  • Img height on auto height div
  • Multi-dimensional regression with Keras
  • MVC 3 - Editor template for List Model [closed]
  • Is there a way to focus on a dynamically created form on Angular 4/Ionic3?
  • Git Configuration with eclipse--not able to push code from eclipse to remote git server
  • NHibernate Lazy Loading Behaviour
  • Testing Rails module without loading ActiveRecord
  • Open Graph Publish Using Spring Social
  • Angular5 Service Worker update(SWUpdate) not detecting on firefox. Working on chrome
  • How to call BeanFactoryPostProcessor.postProcessBeanFactory method when use Spring with XML configur
  • Deploying pre-encrypted configuration files to a production environment
  • Instanciate service on startup in Angular2
  • get passwords from chrome
  • Retrieving values from a PHP Multi-dimensional Array
  • Why does the font in these TD elements render at different sizes?
  • SAVE attribute needed for Fortran variables when only the C_LOC address is returned to a C program?
  • WPF ICommand CanExecute(): RaiseCanExecuteChanged() or automatic handling via DispatchTimer?
  • How solve “Qt: Untested Windows version 10.0 detected!”
  • Textfile Structure (tables)
  • Unity3D & Android: Difference between “UnityMain” and “main” threads?
  • MongoDB in PHP using aggregate to group by _id is null not working
  • Display issues when we change from one jquery mobile page to another in firefox
  • Javascript Callbacks with Object constructor
  • Validaiting emails with Net.Mail MailAddress
  • MySQL WHERE-condition in procedure ignored
  • How can I use Kendo UI with Razor?
  • To display the title for the current loaction in map in iphone
  • Web-crawler for facebook in python
  • trying to dynamically update Highchart column chart but series undefined
  • Java static initializers and reflection
  • unknown Exception android
  • Observable and ngFor in Angular 2
  • Unable to use reactive element in my shiny app
  • java string with new operator and a literal