8

Angular 4 written in Typescript 2.3.4

component.ts

/**
 * Info that drives the tabs in the template. Array is filled
 * in ngOnInit() once data is received from the server
 */
public tabs:Array<{
  title:string,
  description:string,
  data:Array<{name:string}>
}>=[];

component.html

<section *ngFor="let t of tabs">
  ...
  <div *ngFor="let i of t.data">{{i.name}}</div>
                                  ^^^^^^
</section>

Compiler error

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

At first I thought this was linked to my other issue but this is different because there is no ambiguity in the shape of the tabs model: the component clearly shows that name is a property of each member of the data array, itself a property of each member of tabs array.

What's going on here?

BeetleJuice
  • 39,516
  • 19
  • 105
  • 165
  • where you assign data into tabs? please post here. bcz i test your code working fine – Shailesh Ladumor Jul 05 '17 at 05:02
  • @ShaileshLadumor Even if I never assign anything (eg: if I delete my `ngOnInit()`), this error is raised; so the error is not caused by how the data is assiigned to `tabs`. Remember, the error occurs in my code editor, not at runtime so it doesn't have anything to do with the data that came back from the server – BeetleJuice Jul 05 '17 at 05:16
  • i test your code but working fine. assign dayta tabs in onNgInit() and print it in tamplate/. – Shailesh Ladumor Jul 05 '17 at 05:26
  • Are you using plugin language service? Which editor are you using? – yurzui Jul 05 '17 at 05:49
  • @yurzui I am not. Thanks to @ShaileshLadumor's [plunk](https://plnkr.co/edit/E3AI78mUXEGiXx7Hlm3S?p=preview), I'm able to see that it has something to do with the Typescript version. His demo works well, but if you change the TS version (line 44 of `config.js`) to the version I used in the OP (`2.3.4`), the app will crash – BeetleJuice Jul 05 '17 at 05:53
  • 1
    I'm getting this same error using the Angular Language Service extension with VS Code. I think it's a bug in Angular Language Service but I haven't found any workaround yet. – AJ Richardson Jul 05 '18 at 21:20

2 Answers2

0

Try adding the Safe Navigation Operator (?) in the binding, which allows you to navigate an object path in situations where the path may or may not be initially valid.

  <div *ngFor="let i of t.data">{{i?.name}}</div>
Stephen R. Smith
  • 3,310
  • 1
  • 25
  • 41
-1

solution worked !

that gives me this message :

Identifier 'question' is not defined. '' does not contain such a member

plus underline this 

<div class="card-header">
          {{q.question}}  <!- underline this line with red color -->
            ^^^^^^^^^^
</div>

it's a typescript problem and you have to declare tabs as an any type to avoid this problem
tabs : any [];

nadir hamidou
  • 423
  • 2
  • 7
  • 18
  • 1
    Declaring the type as `any` gets rid of all typing support for that variable. Because I use the variable elsewhere (in my typescript files, not just the template) I would like to keep its type well-defined. This is not a good solution for me but am glad it worked for you. Thanks for sharing. – BeetleJuice Oct 18 '18 at 15:39