0

tengo esta interfaz ...

export interface UrlImg {
    img1?: string,
    img2?: string,
    img3?: string,
    img4?: string,
    img5?: string,
    img6?: string
}

Luego defino esta clase Images

import { UrlImg } from 'src/app/interfaces/urlImg/url-img';


export class Images {
    images: UrlImg[]= [];

    constructor(){
        for(let i=0; i<=12; i++){
            console.log('\na')
            this.images.push({img1: ' ', img2: '', img3: '', img4: '', img5: '', img6: ''})
        }
    }
}

tengo este componente donde creo un objeto de esa clase:

@Component({
  selector: 'app-pdf40-imgs',
  templateUrl: './pdf40-imgs.component.html',
  styleUrls: ['./pdf40-imgs.component.css']
})
export class Pdf40ImgsComponent implements OnInit {

    @Input() typeOfPdf: string;

    imagess= new Images(); // <<<<------ acá instancio el objeto
    texts= new Texts();

    cont=1;
    existImage: boolean=false;
    disabledClick= {} as DisabledClick; //usado para deshabilitar el evento click en las inputs de imagenes de las paginas
    images: any[]=[]; //imagenes que se pasan al componente que muestra las imagenes importadas del lado izquierdo de la pantalla

  constructor(
    private uploadImgsService: UploadImagesService, 
    private usuarioService: UsuarioService,
    private productosService: ProductosService, 
    private ngZone: NgZone, private router: Router, 
    private dialog:MatDialog, 
    private snackBar: SnackBar

   ){ 

luego paso ese objeto a un componente hijo desde la plantilla del padre así:

<div  class="row justify-content-center no-gutters p-4"> 
    <div class="col-4 text-center"> <button [disabled]="cont <= 1" (click)="prevPage()" class="btn"> Anterior </button>  </div> 
    <div class="col-4 text-center"> <button [disabled]="cont >= 7"  (click)="nextPage()" class="btn"> Siguiente </button> </div>
</div>

<div class="row justify-content-end no-gutters">
    <div class="col text-right">
        <app-import-images (imagesImport)="initImages($event)" > </app-import-images>
    </div>
</div>

<div class="row no-gutters" >
    <div class="col-lg-2 col-md-12" [ngClass]="{show: images.length != 0, hidden: images.length == 0 }"  >
        <app-show-impor-images  [images]= "images" (setImagesImport)="setImagesImport($event)" (disabledClick)="setDisabledClick($event)"> </app-show-impor-images>
    </div>

    <div class="col">
        <app-pag1 [imagess]="imagess" [texts]="texts" [cont]="cont" [typeOfPdf]="typeOfPdf" [disabledClick]="disabledClick" *ngIf="cont== 1 "> </app-pag1>


        
    </div>
</div>

acá muestro la plantilla del componente hijo (dónde se muestra el error):

<div style="width: 100%;">
  <div class="row no-gutters justify-content-center">
    <div class="col-12 no-gutters text-center ">
      <div class="d-flex justify-content-center" style="width: 100%;">
        <div id="contPrincipal">
          <div id="img1" class="colorContCargaImg img" (click)="fileInput1.click()" [style.background-image]="'url(' + imagess?.images[0]?.img1 + ')'">
            <input #fileInput1 type="file" id="imageUpload1-p1" accept=".png, .jpg, jpeg" name="file" (click)="Click($event)" (change)="uploadImg($event)">
          </div>
          <div id="img2" class="colorContCargaImg img"  >
            <textarea class="text-left textoNegro" [(ngModel)]="texts.texts[0].text1" ></textarea>
            
          </div>

          <div id="text1" class="colorContCargaImg img"  >
            <textarea class="text-left textoNegro" [(ngModel)]="texts.texts[0].text2"  ></textarea>
            
          </div>

          <div id=text2 class="colorContCargaImg " >
            <textarea class="text-left textoBlanco" [(ngModel)]="texts.texts[0].text3"  ></textarea>
              
          </div>          

          <div id=text3 class="colorContCargaImg " >
            <textarea class="text-center textoBlanco" [(ngModel)]="texts.texts[0].text4" ></textarea>
              
          </div>          

          <div id=text4 class="colorContCargaImg textoBlanco"  > 
              <textarea class="text-center textoBlanco" [(ngModel)]="texts.texts[0].text5" ></textarea>
          </div>          

          <div id=text5 class="colorContCargaImg img" >

          </div>

        </div>
        
      </div>
      
    </div>

  </div>

</div>   

y este es el componente hijo donde recibo el objeto:

import { Component, OnInit, ViewChild, ElementRef, Input, OnChanges } from '@angular/core';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
import {ModalComponent} from '../../../modal/modal.component';
import { UsuarioService } from '../../../../../services/usuarios.service'
import { UploadImagesService } from '../../../../../services/upload-images.service';
// import { Images } from '../../../../../interfaces/images/images';
import { Images } from 'src/app/class/images/images';
import { Text } from '../../../../../interfaces/text/text';
import { Texts } from '../../../../../interfaces/texts/texts';

@Component({
  selector: 'app-pag1',
  templateUrl: './pag1.component.html',
  styleUrls: ['./pag1.component.css']
})
export class Pag1Component implements OnInit, OnChanges {

disabled: boolean= true;
// @Input() coverImages: Images; 
@Input() imagess: any; 
@Input() cont: number; 
@Input() formData: any;
@Input() coverTexts: Text;
@Input() texts: Texts= {} as Texts;
@Input() disabledClick: boolean;

    @ViewChild("fileInput1") el1: ElementRef;

    // coverImages= {} as Images;
    // data= {} as Text;
    //text1: string;
    disabledCl: any=null; // deshabilitar click
    form: any='';
  
    constructor(public dialog: MatDialog, private usuarioService: UsuarioService, private uploadImgService: UploadImagesService) { 
        
        
    }

  

    ngOnInit(){
        //console.log('Mostrando Images en onInit: ',this.coverImages);
        console.log('\n\nValor de imagess 0:',this.imagess.images[0])
        console.log('\n\nValor de imagess 1:',this.imagess.images[1])
    }

    ngAfterViewInit(){}

    // openDialog(tipoTexto): void {
    //  console.log('openDialog.....')
    //  let dialogRef = this.dialog.open(ModalComponent, {
    //    width: '250px',
    //    data: { name: this.data,}
    //  });

    //  dialogRef.afterClosed().subscribe(result => {
    //    this.data[tipoTexto]= result;
    //  });
    // }
    Click(event){
        if(this.disabledCl.disabledClick){
          console.log('disabledCl.disabledClick: '+this.disabledCl.disabledClick)
          this.uploadImg(event,this.disabledCl,this.form);
          event.preventDefault();
          event.stopPropagation();
          this.disabledCl.disabledClick= false; //se reestablece el valor de disabledClick a false para que el usuario pueda cargar una foto de su su disco local si lo desea
          this.disabledCl.img= '';
          return false;
        }else{
            return true;
        }
    }


    uploadImg(event,img= null, form= ''){
        console.log('\n\n-------ID:  '+event.target.id);
        // form= this.formData;
        this.imagess= this.uploadImgService.uploadImg(event,1,img, form, this.imagess)
        // console.log('\nMostrando this.coverImages:', this.coverImages.img1)
        // setTimeout(()=>{console.log('\nMostrando this.coverImages:', this.coverImages)},3000)
    }

en este componente uso un servicio, lo importante acá es el método uploadImg que se active con el evento change al subir una imagen, acá está la parte importante del servicio:

    uploadImg(event,numPag,img,form,imagess){
        console.log('********************')
        let reader = new FileReader();
        let file = event.target.files[0];   

        console.log('11111111111111111')
        if (event.target.files && event.target.files[0]) {
            if(form == ''){
                form= new FormData();
                let userData= JSON.parse(localStorage.getItem('usuario'));
                form.append('userId', userData.id_usuarios);
                // form.append('texts',JSON.stringify(this.$texts))
            }

            reader.onloadstart= ()=> {
                // this.imgLoader= true; para colocar un pre-loader
            }
            reader.readAsDataURL(file);

            reader.onload = () => {

                switch (numPag) {
                    case 1:  //Portada
                        // this.pag1.img1= reader.result
                        console.log('\n\n--> ',imagess.images[0]) //<<<--- aca se muestra sin problema
                        imagess.images[0].img1= reader.result;
                        console.log('\n\n2 --> ',imagess.images[0].img1)  //<<<--- aca también se muestra sin problema
                        console.log('Valor de reader.result:'+reader.result)
                        form.append("cover", event.target.files[0], event.target.id );  
                        this.$formData.next(form);
                        this.$coverImages.next(this.pag1);
                        return imagess;
                    break;

vean que allí en el servicio tengo unos console.log mostrando el arreglo y el resultado se muestra sin problema como se puede apreciar acá:

introducir la descripción de la imagen aquí

pero en el html me muestra el siguiente error:

introducir la descripción de la imagen aquí

Sinceramente no entiendo por que si ya tiene un valor me muestra ese error, incluso, coloque también un dos console.log en el onInit del componente hijo (lo pueden ver arriba en el codigo del comp hijo) y no tiene problema al mostrar el arreglo y sus valores.

intenté esto en el html imagess?.images[0]?.img1 pero sigo recibiendo el mismo error. ya no se que mas intentar, puede alguien explicarme que sucede y como podría resolverlo? creí que al inicializar los valores en el constructor de la clase me evitaría estos problemas con el undefined pero no... No entiendo por que si ya esta inicializado y de hehco los compruebo con el console.log en el OnInit me sigue dando ese error. Espero alguien me pueda ayudar, gracias de antemano,

Saludos!

9
  • El error aparece en pag1.component.html puedes agregar ese archivo?
    – Lobos
    Commented el 16 nov. 2020 a las 1:58
  • @Lobos Hola! ya editpe mi pregunta y agregué el código del .html que es donde se muestra el error.
    – JulianProg
    Commented el 16 nov. 2020 a las 2:02
  • Y al retirar esa línea el error desaparece?
    – Lobos
    Commented el 16 nov. 2020 a las 2:33
  • Si, el error desaparece si quito eso.
    – JulianProg
    Commented el 16 nov. 2020 a las 2:35
  • Bueno, se me terminaron las ideas🙁. Revisé, incluso repliqué tu estructura y no tuve error stackblitz.com/edit/…
    – Lobos
    Commented el 16 nov. 2020 a las 2:38

2 respuestas 2

0

Bueno al crearse la vista del hijo la variable imagess inicialmente es undefined luego de ejecutado el constructor se inyectan los valores, pero durante la construcción del componente se crea la vista html del hijo, lo que te origina el error luego todo te anda bien, pero para evitar el error te sugiero que antes de pintar lo que está dentro del primer div en el componente hijo pongas un *ngIf y mandas a llamar a una función que te indique si la variable imagess es undefined entonces no muestres aún la vista hasta que la variable ya se haya inyectado, de esta manera:

vista del Hijo:

<!-- acá voy agregar un *ngIf="verificarVariable()" y esta función la declararé en el componente-->
<div style="width: 100%;" *ngIf="verificarVariable()">
  <div class="row no-gutters justify-content-center">
    <div class="col-12 no-gutters text-center ">
      <div class="d-flex justify-content-center" style="width: 100%;">
        <div id="contPrincipal">
          <div id="img1" class="colorContCargaImg img" (click)="fileInput1.click()" [style.background-image]="'url(' + imagess?.images[0]?.img1 + ')'">
            <input #fileInput1 type="file" id="imageUpload1-p1" accept=".png, .jpg, jpeg" name="file" (click)="Click($event)" (change)="uploadImg($event)">
          </div>
          <div id="img2" class="colorContCargaImg img"  >
            <textarea class="text-left textoNegro" [(ngModel)]="texts.texts[0].text1" ></textarea>
            
          </div>

          <div id="text1" class="colorContCargaImg img"  >
            <textarea class="text-left textoNegro" [(ngModel)]="texts.texts[0].text2"  ></textarea>
            
          </div>

          <div id=text2 class="colorContCargaImg " >
            <textarea class="text-left textoBlanco" [(ngModel)]="texts.texts[0].text3"  ></textarea>
              
          </div>          

          <div id=text3 class="colorContCargaImg " >
            <textarea class="text-center textoBlanco" [(ngModel)]="texts.texts[0].text4" ></textarea>
              
          </div>          

          <div id=text4 class="colorContCargaImg textoBlanco"  > 
              <textarea class="text-center textoBlanco" [(ngModel)]="texts.texts[0].text5" ></textarea>
          </div>          

          <div id=text5 class="colorContCargaImg img" >

          </div>

        </div>
        
      </div>
      
    </div>

  </div>

</div>

Ahora en el componente Hijo paso a declarar la función verificarVariable() (puedes saltarte esta función y poner la definición directamente en el *ngIf del <div> pero a mi me gusta tener estas cosas dentro del componente) la función la he declarado al final del componente.

import { Component, OnInit, ViewChild, ElementRef, Input, OnChanges } from '@angular/core';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
import {ModalComponent} from '../../../modal/modal.component';
import { UsuarioService } from '../../../../../services/usuarios.service'
import { UploadImagesService } from '../../../../../services/upload-images.service';
// import { Images } from '../../../../../interfaces/images/images';
import { Images } from 'src/app/class/images/images';
import { Text } from '../../../../../interfaces/text/text';
import { Texts } from '../../../../../interfaces/texts/texts';

@Component({
  selector: 'app-pag1',
  templateUrl: './pag1.component.html',
  styleUrls: ['./pag1.component.css']
})
export class Pag1Component implements OnInit, OnChanges {

disabled: boolean= true;
// @Input() coverImages: Images; 
@Input() imagess: any; 
@Input() cont: number; 
@Input() formData: any;
@Input() coverTexts: Text;
@Input() texts: Texts= {} as Texts;
@Input() disabledClick: boolean;

    @ViewChild("fileInput1") el1: ElementRef;

    // coverImages= {} as Images;
    // data= {} as Text;
    //text1: string;
    disabledCl: any=null; // deshabilitar click
    form: any='';
  
    constructor(public dialog: MatDialog, private usuarioService: UsuarioService, private uploadImgService: UploadImagesService) { 
        
        
    }

  

    ngOnInit(){
        //console.log('Mostrando Images en onInit: ',this.coverImages);
        console.log('\n\nValor de imagess 0:',this.imagess.images[0])
        console.log('\n\nValor de imagess 1:',this.imagess.images[1])
    }

    ngAfterViewInit(){}

    // openDialog(tipoTexto): void {
    //  console.log('openDialog.....')
    //  let dialogRef = this.dialog.open(ModalComponent, {
    //    width: '250px',
    //    data: { name: this.data,}
    //  });

    //  dialogRef.afterClosed().subscribe(result => {
    //    this.data[tipoTexto]= result;
    //  });
    // }
    Click(event){
        if(this.disabledCl.disabledClick){
          console.log('disabledCl.disabledClick: '+this.disabledCl.disabledClick)
          this.uploadImg(event,this.disabledCl,this.form);
          event.preventDefault();
          event.stopPropagation();
          this.disabledCl.disabledClick= false; //se reestablece el valor de disabledClick a false para que el usuario pueda cargar una foto de su su disco local si lo desea
          this.disabledCl.img= '';
          return false;
        }else{
            return true;
        }
    }


    uploadImg(event,img= null, form= ''){
        console.log('\n\n-------ID:  '+event.target.id);
        // form= this.formData;
        this.imagess= this.uploadImgService.uploadImg(event,1,img, form, this.imagess)
        // console.log('\nMostrando this.coverImages:', this.coverImages.img1)
        // setTimeout(()=>{console.log('\nMostrando this.coverImages:', this.coverImages)},3000)
    }

    // función que verifica la variable en mención
    verificarVariable(): boolean {
         if(this.imagess == undefined) {
             return false;
         } else {
             return true;       
         }
    }
 }

PD: en el *ngIf puedes colocar directamente *ngIf="imagess != undefined" y me parece que tendrás el mismo comportamiento que la función, y si tienes más variables para verificar puedes hacerlo con todos tus inputs si deseas.
PD2: tu código me parece haberlo visto en otra pregunta por un tema similar a los problemas con los undefined, casi seguro que el mismo código.

Me avisas si te sirvió :'v

1
  • Te propongo simplificar un poco la función verificarVariable del siguiente modo, checkImages = (): boolean => !!this.images o poner la directiva *ngIf="imagess" que queda bastante más claro.
    – VRoxa
    Commented el 28 dic. 2020 a las 23:39
0

Un *ngIf="imagess && imagess.image" en alguno de los div superiores arreglaría todo, por ejemplo:

<div id="contPrincipal" *ngIf="imagess && imagess.image" >

Por favor indícame si te funcionó la recomendación.

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.