Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Missing item variable / item is not defined #34762

Open
marquezm2410 opened this issue Jan 13, 2020 · 3 comments
Open

Missing item variable / item is not defined #34762

marquezm2410 opened this issue Jan 13, 2020 · 3 comments

Comments

@marquezm2410
Copy link

@marquezm2410 marquezm2410 commented Jan 13, 2020

馃摎 Docs or angular.io bug report

Description

A clear and concise description of the problem...

馃敩 Minimal Reproduction

What's the affected URL?**

https://angular.io/guide/structural-directives

Reproduction Steps**

Go To:
Writing your own structural directives
These microsyntax mechanisms are also available to you when you write your own structural directives. For example, microsyntax in Angular allows you to write <div *ngFor="let item of items">{{item}} instead of <ng-template ngFor [ngForOf]="items">

{{item}}
. The following sections provide detailed information on constraints, grammar, and translation of microsyntax.

item is not defined

missing item variable

Expected vs Actual Behavior**

馃摲Screenshot

馃敟 Exception or Error





馃實 Your Environment

Browser info

Anything else relevant?

@ngbot ngbot bot added this to the needsTriage milestone Jan 14, 2020
@marquezm2410

This comment has been minimized.

Copy link
Author

@marquezm2410 marquezm2410 commented Jan 14, 2020

I know, I'm just alerting you that the documentation has that error!

@kapunahelewong

This comment has been minimized.

Copy link
Contributor

@kapunahelewong kapunahelewong commented Jan 16, 2020

Hey thanks, @marquezm2410. Could you write out how it should be or explain it to me specifically? (The fix isn't obvious to me.)

Also maybe it helps to know that that particular example isn't meant to run on its own, it is purely a reference to syntax. So item won't be defined unless you define it. For example, this *ngFor part in the example app's template for that doc:

<ul>
  <li *ngFor="let hero of heroes">{{hero.name}}</li>
</ul>

requires that it be defined in the template:

import { Hero, heroes } from './hero';
...
export class AppComponent {
  heroes = heroes;  // <--here
  hero = this.heroes[0];

Notice that Hero and heroes are imported from hero.ts:

export class Hero {
  id: number;
  name: string;
  emotion?: string;
}

export const heroes: Hero[] = [
  { id: 1, name: 'Dr Nice',  emotion: 'happy'},
  { id: 2, name: 'Narco',     emotion: 'sad' },
  { id: 3, name: 'Windstorm', emotion: 'confused' },
  { id: 4, name: 'Magneta'}
];

So that's why those work and the small inline snippet wouldn't 鈥 there is no place where items is defined. You'd have to have each of those pieces in your app. The word item is used in the same way that one might use foo to explain a concept.

I created a StackBlitz to help clarify. Does this help? If I've missed your meaning, would you be interested in submitting a PR or creating a StackBlitz?

@kapunahelewong kapunahelewong added this to Pending - Top of backlog in docs Jan 16, 2020
@ericmartinezr

This comment has been minimized.

Copy link
Contributor

@ericmartinezr ericmartinezr commented Jan 16, 2020

He means this snippet (see here)

<ng-template ngFor [ngForOf]="items"><div>{{item}}</div></ng-template>

is missing a let-item.

<ng-template ngFor let-item [ngForOf]="items"><div>{{item}}</div></ng-template>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
docs
Pending - Top of backlog
4 participants
You can鈥檛 perform that action at this time.