2

I'm building an Angular 4 project in Typescript 2.3.4. I can't figure out what's wrong with the code below.

IDialog interface

export interface IDialog{
    cancellable?: boolean,     

    inputs?: Array<{label: string, value?: any, description?: string}|string>
    message: string
    title?: string,
    type?: DialogInputTypes // <- an Enum
}

SampleComponent.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'}
    ]
  };

SampleComponent.html

<input *ngFor="let input of dialog.inputs" [value]="input.value">
                                                    ^^^^^^^^^^^^

This error is thrown by the compiler:

Angular: Identifier 'value' is not defined. <anonymous> does not contain such a member

I just upgraded from Angular 2 with Typescript 2.0 and this error was not present before.

Why is this error thrown? Perhaps it has to do with the fact that IDialog.inputs is defined as either an array or a string, and at compile time there is no way for the compiler to know which shape inputs has. If I remove |string from the interface, the error goes away.

More importantly, I don't know how to fix my code.

BeetleJuice
  • 39,516
  • 19
  • 105
  • 165
  • I wonder if `[value]="input.value"` should be `[value]="input?value"` since that is how it is declared in the interface. – R. Richards Jul 04 '17 at 23:26
  • Thanks. Using `input?.value` makes no difference. I think the error has to do with the fact that `IDialog.inputs` is defined as either an array or a string, and at compile time there is no way for the compiler to know which shape `inputs` has. I'm just speculating though – BeetleJuice Jul 04 '17 at 23:36
  • I agree with @BeetleJuice, I suspect it has to do with the "|string" as part of the IDialog interface. You'll need to cast it to the right type. – Michael Kang Jul 05 '17 at 00:27
  • I don't think that's the problem. It's easy to test though, just remove that `|string` and see if the error is still there. – Harry Ninh Jul 05 '17 at 00:36
  • @HarryNinh If I remove `|string` the error goes away, but that's not a solution because sometimes that member is a string. So making this change will throw errors elsewhere. – BeetleJuice Jul 05 '17 at 00:41
  • If that is the case, you would want to change your template anyway, what if the inputs contains a string and everything will screw up. – Harry Ninh Jul 05 '17 at 01:38
  • @HarryNinh my mistake. It's never a string. Sometimes it's an array of strings, as the OP interface shows. However in the context of this component, I know it will always be an `Array<{label:string, value:string}` because this is hard-coded (see the `SampleComponent` code section in the OP) – BeetleJuice Jul 05 '17 at 02:16
  • Please reproduce it – yurzui Jul 05 '17 at 05:47

2 Answers2

0

Its definitely your project configuration Your code works perfectly fine if its like this 

@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;

}

I am using Angular 4.0.2 Typescript 2.2.2 I modified in order to be more specific

Ionut Botizan
  • 34
  • 7
  • 2
    Changing the interface is not the solution I want. The interface as it's written in the OP shows the correct shape of `IDialog.inputs`. Sometimes it's an array, sometimes it's a string. If I just change it to `Array`, errors will be thrown elsewhere where `inputs` is used as a string – BeetleJuice Jul 05 '17 at 00:44
  • I am not an expert but the label , value , description are an anonymous Array or are they a specific type ? My guess is if they are anonymous the compiler doesnt know how to pick between an anonymous Array or a string – Ionut Botizan Jul 05 '17 at 08:01
  • This is happening for me with simple strings: `{value:string, message: string, description:string}[]` – Ben Racicot Feb 20 '19 at 21:56
0

Disable angular extension pack and angular language service plugins from VS code.

I had a similar problem and this solved it.

Melebius
  • 6,183
  • 4
  • 39
  • 52
Bashir M. Saad
  • 46
  • 3
  • I would not want to do that because I find the angular language service very valuable: it allows autocomplete and type checking of component properties while I write my template. It was just this specific situation that I found annoying. I think I downgraded from `typescript 2.3.4` to `typescript 2.3.3` to address this, but I don't remember clearly. – BeetleJuice Oct 27 '17 at 14:31