Tengo un componente angular con una matriz de variables de entrada que se inicializa de forma asíncrona en el padre.
@Component({ ... }) export class ChildComponent { @Input inputVariable: string; } @Component({ ... }) export class ParentComponent implements OnInit { inputVariables: string[] = []; constructor( private http: HttpClient ) { } ngOnInit(): void { this.http.get<string[]>('someUrl') .subscribe(res => this.inputVariables = res) } }Ahora quiero representar en parent.component.html un ChildComponent para cada variable de entrada como este:
<div *ngFor="let inputVariable of inputVariables"> <child-component [inputVariable]="inputVariable" /> </div> En ChildComponent puedo estar seguro de que inputVariable está definido. Sin embargo, mecanografiado se queja de que el tipo de inputVariable debe ser string | undefined Sin embargo, luego necesito verificar cada uso de inputVariable en ChildComponent si inputVariable está definido o no, que no es lo que quiero hacer.
¿Hay alguna solución para que ts infiera que inputVariable siempre se define para cualquier ChildComponent representado?
El valor para @Input se establece más tarde que en la inicialización (en el gancho ngOnInit para ser precisos). Para evitar que TypeScript se queje, simplemente establezca el valor predeterminado para inputVariable así:
@Component({ ... }) export class ChildComponent { @Input inputVariable: string = ""; } Le dice que establezca el tipo en string | undefined , porque el valor predeterminado de cada variable en javascript es undefined . Al darle el valor predeterminado de cadena vacía, no tiene que preocuparse por los diferentes tipos.