¿Por qué mi plantilla de Angular está generando este error de Typescript?
Estoy construyendo un proyecto Angular 4 en Typescript 2.3.4. No puedo averiguar qué está mal con el código a continuación.
Interfaz IDialog
export interface IDialog{
cancellable?: boolean,
inputs?: Array<{label: string, value?: any, description?: string}|string>
message: string
title?: string,
type?: DialogInputTypes // <- an Enum
}
ComponenteDeEjemplo.ts
public dialog:IDialog = {
cancellable:false,
title:'Dialog Title',
message:'This is a modal dialog',
type:DialogInputTypes.button,
inputs:[
{label:'OK', value:'OK'},
{label:'Cancel', value:'Cancel'}
]
};
ComponenteDeEjemplo.html
<input *ngFor="let input of dialog.inputs" [value]="input.value">
^^^^^^^^^^^^
Este error es lanzado por el compilador:
Angular: El identificador 'value' no está definido.
<anonymous>no contiene tal miembro
Acabo de actualizar desde Angular 2 con Typescript 2.0 y este error no estaba presente antes.
¿Por qué se lanza este error? Quizás tenga que ver con el hecho de que IDialog.inputs se define como un array o una cadena, y en tiempo de compilación no hay forma de que el compilador sepa qué forma tiene inputs. Si elimino |string de la interfaz, el error desaparece.
Más importante aún, no sé cómo arreglar mi código.
Respuesta #1
Definitivamente es la configuración de tu proyecto. Tu código funciona perfectamente bien si es así.
@Component({
template: `
<input *ngFor="let input of dialog.inputs" [value]="input.value">
`
})
export class WhateverComponent{
public dialog:IDialog = {
inputs:[
{label:'OK', value:'OK'},
{label:'Cancel', value:'Cancel'}
]
};
}
export interface IDialog{
inputs: Array<iSomeControl | string >;
}
export interface iSomeControl{
label: string;
value: string;
}Estoy usando Angular 4.0.2 Typescript 2.2.2. Modifiqué para ser más específico
Respuesta #2
Deshabilitar el paquete de extensión de Angular y los plugins de servicio de lenguaje de Angular en VS Code.
Tuve un problema similar y esto lo resolvió.
