10000 Using local variables with ngFor · Issue #6947 · angular/angular · GitHub
[go: up one dir, main page]

Skip to content

Using local variables with ngFor #6947 8000

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’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
templth opened this issue Feb 8, 2016 · 5 comments
Closed

Using local variables with ngFor #6947

templth opened this issue Feb 8, 2016 · 5 comments

Comments

@templth
Copy link
templth commented Feb 8, 2016

Context

Local variables (defined with the # character at a element attribute) don't apply for this use case: rqw local variables for a loop with ngFor.

In fact, when you define a local variable on an HTML element it corresponds to the component if any. When there is no component on the element, the variable refers to the element itself.

Specifying a value for a local variable allows you to select a specific directive associated with the current element. For example:

<input #name="ngForm" ngControl="name" [(ngModel)]="company.name"/>

will set the instance of the ngForm directive associated with the current in the name variable.

So local variables don't allow to set a value created for the current element of a loop.

If I try to do something like that:

<div *ngFor="#elt of eltList" >
  <span #localVariable="elt.title"></span>
  {{localVariable}}
</div>

I have this following error:

Error: Template parse errors:
There is no directive with "exportAs" set to "elt.title" ("
  <div *ngFor="#elt of eltList" >
    <span [ERROR ->]#localVariable="elt.title"></span>
    {{localVariable}}
  </div>
"): AppComponent@2:10

Angular2 actually looks for a directive matching the provided name elt.title here)... This plunkr shows this: https://plnkr.co/edit/qcMGr9FS7yQD8LbX18uY?p=preview. The section "Local variables" of this link http://victorsavkin.com/post/119943127151/angular-2-template-syntax also describes this.

In addition to the current element of the iteration, ngFor only provides a set of exported values that can be aliased to local variables: index, last, even and odd.

Question

It would be interested to have a way to define custom local variables within the loop. This way you could define a computed variable once and use it several times in the loop block.

<div *ngFor="#t of todos; #i=index; #formattedTodoName=format(t.name)">
  {{formattedTodoName}}
  (...)
  {{formattedTodoName}}
</div>

I would be interested in having your feedbacks.

This question follows the one from the StackOverflow website: http://stackoverflow.com/questions/35257455/ng2-how-to-create-variable-in-ngfor-loop/.

Thanks very much!

@KiaraGrouwstra
Copy link
Contributor

Seconding this, I was just looking for the same thing, then searched here hoping for existing solutions. Having to have duplicate code here is silly, and being able to call a function only once (in case it's expensive) without having to first store its result in the component admittedly also adds a bunch of convenience. I'd consider this feature request a pretty valuable improvement for the template language.

@zoechi
Copy link
Contributor
zoechi commented Apr 2, 2016

dup of #2451 ?

@KiaraGrouwstra
Copy link
Contributor

Looks like it to me, yeah. Guess if @templth agrees we can close this copy.

@templth
Copy link
Author
templth commented Apr 30, 2016

Sure, I agree ;-) Thanks guys for pointing this out!

@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 8, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants
0