Búsqueda de sitios web

¿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ó.