0

Tengo problemas para manipular el DOM con angular 5

Lo que estoy tratando de hacer es agarrar la etiqueta p con

#minu y @ViewChild('minu') minu ; 

pero al hacer console.log(this.minu) el resultado que obtengo es

[object object] 

en vez de la etiqueta

tambien intente obtener la etiqueta con document.getElementsByClassName('.minutes')

pero al imprimir esto por console.log me da undefiend

import {Component, ViewChild, ElementRef, Renderer2} from "@angular/core";
import { IonicPage, NavController, NavParams } from "ionic-angular";

@IonicPage()
@Component({
  selector: "page-cvv-code",
  templateUrl: "cvv-code.html",
})
export class CvvCodePage {
  @ViewChild('minu') minu ;


  minutes:any
  seconds:any
  cont = 0;
  //

  constructor(public navCtrl: NavController, public navParams: NavParams,private renderer: Renderer2) {
    this.timer();
  }

timer(){

     let display = this.minu


     let txt = this.renderer.createText('03:00 Min');
     this.renderer.appendChild(display, 'ssdsdsdsa')

    let threeMinutes = 60 * 3;
      let timer = 180;
      let minutes 
      let seconds      

      let i = setInterval(function () {

       let  m = timer / 60
       let s = timer % 60
        
        minutes = parseInt( m.toString(), 10);
        seconds = parseInt(s.toString(), 10);
        minutes = minutes < 10 ? '0' + minutes : minutes;
        seconds = seconds < 10 ? '0' + seconds : seconds;
         display.textContent = minutes + ':' + seconds + ' Min';
        
        console.log(minutes + ':' + seconds + ' Min');
        
        

        if (--timer < 0) {
            clearInterval(i)
          timer = threeMinutes;
          
        }

      }, 1000);
  }


}
<p class="minutes" #minu></p>

0

2 respuestas 2

0

LLama el método timer() en el ngAfterViewInit():

ngAfterViewInit()
{ 
  this.timer();
}
0

Su problema puede resolverse de la siguiente manera:

import {Component, ViewChild, ElementRef,AfterViewInit, Renderer2} from "@angular/core";
import { IonicPage, NavController, NavParams } from "ionic-angular";

@IonicPage()
@Component({
  selector: "page-cvv-code",
  templateUrl: "cvv-code.html",
})
export class CvvCodePage implements AfterViewInit {
  @ViewChild('minu') minu: ElementRef; 


  minutes:any
  seconds:any
  cont = 0;
  //

  constructor(public navCtrl: NavController, public navParams: NavParams,private renderer: Renderer2) {
    // this.timer();

  }

ngAfterViewInit() {
    // Check in the console log the current value
    console.log(this.minu.nativeElement.innerHTML); 

  //  this.minu.nativeElement.innerHTML = "Valor DOM actualizado correctamente!!!"; 
     timer();
  }

timer(){

     let display = this.minu


     let txt = this.renderer.createText('03:00 Min');
     this.renderer.appendChild(display, 'ssdsdsdsa')

    let threeMinutes = 60 * 3;
      let timer = 180;
      let minutes 
      let seconds      

      let i = setInterval(function () {

       let  m = timer / 60
       let s = timer % 60

        minutes = parseInt( m.toString(), 10);
        seconds = parseInt(s.toString(), 10);
        minutes = minutes < 10 ? '0' + minutes : minutes;
        seconds = seconds < 10 ? '0' + seconds : seconds;
         display.textContent = minutes + ':' + seconds + ' Min';

        console.log(minutes + ':' + seconds + ' Min');



        if (--timer < 0) {
            clearInterval(i)
          timer = threeMinutes;

        }

      }, 1000);
  }


}

En el metodo ngAfterViewInit() accede y modifica los elementos nativos del DOM usando el nativeElement del objeto minu:

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.