0

Pessoal eu realmente preciso da ajuda de vocês. De acordo com este tutorial tutorial Eu preciso de um componente customizado que me exibe o seguinte erro:

"Can't bind to 'expandHeight' since it isn't a known property of 'expandable'."

quando eu rodo meu app.

No meu caso "home.html" é "taxa-incendio.html". Aqui está:

<ion-list>
  <button detail-none (click)="expandItem(item)" ion-item *ngFor="let item of items">
    <ion-thumbnail item-start>
      <img src="assets/imgs/bolacha.png">
    </ion-thumbnail>
    <h2>My Neighbor Totoro</h2>
    <p>Hayao Miyazaki • 1988</p>
    **<expandable** [expandHeight]="itemExpandHeight" [expanded]="item.expanded">
        Hello people
    **</expandable>**
    <button ion-button clear item-end>View</button>
  </button>
</ion-list>

Meu taxa-incendio.ts:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

/**
 * Generated class for the TaxaIncendioPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-taxa-incendio',
  templateUrl: 'taxa-incendio.html',
})
export class TaxaIncendioPage {

  items: any = [];
  itemExpandHeight: number = 100;

  constructor(public navCtrl: NavController, public navParams: NavParams) {

    this.items = [
      {expanded: false},
      {expanded: false},
      {expanded: false},
      {expanded: false},
      {expanded: false},
      {expanded: false},
      {expanded: false},
      {expanded: false},
      {expanded: false}
    ];

  }

  expandItem(item){

    this.items.map((listItem) => {

        if(item == listItem){
            listItem.expanded = !listItem.expanded;
        } else {
            listItem.expanded = false;
        }

        return listItem;

    });

  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad TaxaIncendioPage');
  }

  exibir(item)
  { 
    item.styleClass = (Number(item.styleClass) == 1)?0:1;
  }

}

Meu taxa-incendio.scss:

    .ios, .md{
    page-taxa-incendio {
        button{
            align-items: baseline;
        }
    }
}

OBS.: Circundei o erro com ** **.

Meu expendable.ts:

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

/**
 * Generated class for the ExpendableComponent component.
 *
 * See https://angular.io/api/core/Component for more info on Angular
 * Components.
 */
@Component({
  selector: 'expendable',
  templateUrl: 'expendable.html'
})
export class ExpendableComponent {

  text: string;

  @ViewChild('expandWrapper', {read: ElementRef}) expandWrapper;
  @Input('expanded') expanded;
  @Input('expandHeight') expandHeight;

  constructor(public renderer: Renderer) {
    console.log('Hello ExpendableComponent Component');
    this.text = 'Hello World';
  }

  ngAfterViewInit(){
    this.renderer.setElementStyle(this.expandWrapper.nativeElement, 'height', this.expandHeight + 'px');   
  }

}

Meu expandable.html:

<!-- Generated template for the ExpendableComponent component -->
<div #expandWrapper class='expand-wrapper' [class.collapsed]="!expanded">
  <ng-content></ng-content>
</div>

Meu expandable.scss:

expandable {

    .expand-wrapper {
        transition: 0.2s linear;
    }  

    .collapsed {
        height: 0 !important;
    }

}

Error screen html

Error screen app

0

1 Resposta 1

1

No seu home.html você chamou pelo seletor expandable, porem no seu expendable.ts vc declarou o seletor como expendable.

Troque para

<expendable [expandHeight]="itemExpandHeight" [expanded]="item.expanded">
        Hello people
</expendable>
17
  • 1
    vc compilou também pra ver se o erro persiste em tempo de execução?
    – jraspante
    Commented 21/08/2018 às 16:28
  • 1
    tente definir um tipo para @Input('expanded') expanded; e @Input('expandHeight') expandHeight;
    – jraspante
    Commented 21/08/2018 às 16:40
  • 1
    Sim, eu falo pra definir um tipo number, any, string...
    – jraspante
    Commented 21/08/2018 às 16:55
  • 1
    poderia colocar seu codigo no stackblitz?
    – jraspante
    Commented 21/08/2018 às 17:08
  • 1
    sim, você também pode subir somente os componentes necessarios e lembrar de importar os componentes no app.module.ts
    – jraspante
    Commented 21/08/2018 às 18:19

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .