Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Ionic2 não aplica o estilo ao criar elementos com Template strings

Boa tarde, estou tentando criar elementos do DOM dinamicamente por meio de uma função, mas as "tags" não aparecem corretamente. Elas são carregadas mas não é aplicado nenhum estilo.

home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Home
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button (click)="carregaCodigo('#divFormulario')">Button</button>

  <div id="divFormulario"></div>

</ion-content>

home.ts

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

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

  constructor(public navCtrl: NavController) {

  }

  public elemento : Element;

  carregaCodigo(seletor){
    this.elemento = document.querySelector(seletor);

    this.elemento.innerHTML = `
      <ion-card-content>

            <ion-item-group>

                <ion-item-divider color="light">

                   <ion-icon name="contact" item-right></ion-icon>
                    Dados
                </ion-item-divider>

                <ion-item>
                    <ion-label floating>Nome: </ion-label>
                    <ion-input name="nome"></ion-input>
                </ion-item>

                <ion-item>
                    <ion-label floating>Sobrenome: </ion-label>
                    <ion-input name="sobrenome"></ion-input>
                </ion-item>

        </ion-card-content>


    `;
  }
}

Todos os campos aparecem, mas sem nenhuma formatação e nem funcionam corretamente. Já pesquisei por alguma solução mas não encontrei.

Obrigado!

Denis Miller

5 respostas

Boa noite!

Você não deve fazer isso. IONIC usa Angular é o que você fez fere o princípio do framework que é não manipular DOM. Você fez os cursos de Angular pré requisito do treinamento?

Você parece ter usado uma estratégia do curso avançado de JavaScript no Angular. Misturou os dois. Ainda usou documento.querySelector. angular quer tudo menos que voce acesse o DOM assim.

Template é escrito no html do template do componente. Estou confuso com seu código, porque fez assim.

Diz pra gente o que desejava fazer.

Oi, Flávio! Obrigado por responder. O que estou tentando fazer é um trabalho para a faculdade. Eu gostaria de criar é uma calculadora de equações do segundo grau. O usuário entraria com os valores de a, b e c e o app mostraria um passo a passo da resolução da equação. A captura dos dados e a resolução da equação foi feito, mas agora minha dificuldade é mostrar na tela para o usuário o passo a passo da resolução.

Essa é minha dúvida, quando o usuário clicar no botão "calcular" chama uma função que faz o cálculo e atualizar o template com o passo a passo da resolução.

solução!

Já cogitou fazer em JavaScript puro sem ionic? Não fica mais simples?

Vou fazer só com js mesmo. Será mais simples! Obrigado, Flávio!