tengo el siguiente problema y no hallo la forma de resolverlo. Tengo una interfaz, luego la importo e inicializo en un componente , pero cuándo intento asignar un valor a una de sus propiedades me dice que no está definida, cuál es el error? gracias de antemano al que me pueda ayudar con este problema.
dejo el código:
este es el componente padre
//para los textos
textsPag1= {} as Texts;
textsPag2= {} as Text;
@ViewChild(PortadaComponent) coverPage: PortadaComponent;
@ViewChild(Pag1Component) page1: Pag1Component;
//Se subscribe a las imagenes de todas las paginas
constructor(
private uploadImgsService: UploadImagesService,
private usuarioService: UsuarioService,
private productosService: ProductosService,
private ngZone: NgZone, private router: Router,
private dialog:MatDialog,
private snackBar: SnackBar
){
// this.textsPag1.pag1Texts.text1= 'b'
// this.textsPag1.pag1Texts.text2= 'b'
// this.textsPag1.pag1Texts.text3= 'b'
// this.textsPag1.pag1Texts.text4= 'b'
// this.textsPag1.pag1Texts.text5= 'b'
acá llamo al hijo y le paso la variable textsPag1:
<div class="col">
<app-portada [coverImages]="coverImages" [formData]="formData" [textsPag1]="textsPag1" *ngIf="cont == 1" [disabledClick]="disabledClick"> </app-portada> <!-- modificar condicion del if, solo se dejó asi para prueba-->
<app-pag1 [imagesPag2]="imagesPag2" [formData]="formData" [textsPag2]="textsPag2" [disabledClick]="disabledClick" *ngIf="cont == 2"> </app-pag1>
<!-- <app-pag2 > </app-pag2> -->
</div>
este es el componente hijo:
@Component({
selector: 'app-portada',
templateUrl: './portada.component.html',
styleUrls: ['./portada.component.css']
})
export class PortadaComponent implements OnInit, OnChanges {
disabled: boolean= true;
@Input() coverImages: Images;
@Input() formData: any;
@Input() coverTexts: Text;
@Input() textsPag1: Texts;
@Input() disabledClick: boolean;
@ViewChild("fileInput1") el1: ElementRef;
// coverImages= {} as Images;
// data= {} as Text;
test= {} as Texts;
text1: string;
disabledCl: any=null; // deshabilitar click
form: any='';
constructor(public dialog: MatDialog, private usuarioService: UsuarioService, private uploadImgService: UploadImagesService) {
console.log('\n\nConstructor de PortadaComponent...')
// this.textsPag1.pag1Texts.text1= 'ZZZZZZZZZZZZZ';
}
la plantilla del componente hijo:
<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(' + coverImages.img1 + ')'">
<input #fileInput1 type="file" id="imageUpload1" 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)]="test.pag1Texts.text1" ></textarea>
</div>
<div id="text1" class="colorContCargaImg img" >
<textarea class="text-left textoNegro" [(ngModel)]="test.pag1Texts.text2" ></textarea>
</div>
<div id=text2 class="colorContCargaImg " >
<textarea class="text-left textoBlanco" [(ngModel)]="test.pag1Texts.text3" ></textarea>
</div>
<div id=text3 class="colorContCargaImg " >
<textarea class="text-center textoBlanco" [(ngModel)]="test.pag1Texts.text4" ></textarea>
</div>
<div id=text4 class="colorContCargaImg textoBlanco" >
<textarea class="text-center textoBlanco" [(ngModel)]="test.pag1Texts.text5" ></textarea>
</div>
<div id=text5 class="colorContCargaImg img" >
</div>
</div>
</div>
</div>
</div>
</div>
esta es la interfaz:
export interface Texts {
pag1Texts: {text1?: string, text2?: string, text3?: string, text4?: string, text5?: string },
pag2Texts: {text1?: string, text2?: string, text3?: string, text4?: string, text5?: string },
pag3Texts: {text1?: string, text2?: string, text3?: string, text4?: string, text5?: string },
pag4Texts: {text1?: string, text2?: string, text3?: string, text4?: string, text5?: string },
pag5Texts: {text1?: string, text2?: string, text3?: string, text4?: string, text5?: string },
pag6Texts: {text1?: string, text2?: string, text3?: string, text4?: string, text5?: string },
pag7Texts: {text1?: string, text2?: string, text3?: string, text4?: string, text5?: string },
pag8Texts: {text1?: string, text2?: string, text3?: string, text4?: string, text5?: string },
pag9Texts: {text1?: string, text2?: string, text3?: string, text4?: string, text5?: string },
pag10Texts: {text1?: string, text2?: string, text3?: string, text4?: string, text5?: string },
pag11Texts: {text1?: string, text2?: string, text3?: string, text4?: string, text5?: string },
pag12Texts: {text1?: string, text2?: string, text3?: string, text4?: string, text5?: string },
pag13Texts: {text1?: string, text2?: string, text3?: string, text4?: string, text5?: string },
pag14Texts: {text1?: string, text2?: string, text3?: string, text4?: string, text5?: string }
}
acá dejo una captura del error en el componente portada (componente hijo):
se que es un problema de inicialización, pero no hallo como resolverlo, si ven en el componente padre hay unas lineas comentadas donde intente inicializar los valores antes de pasarlos al componente hijo pero no funcionó, como puedo arreglar esto?