javascript - How to access variable defined in *ngFor? - Stack Overflow

admin管理员组

文章数量:1356765

In my first Angular 4 application, I defined a list ponent :

<edm-document *ngFor="let document of documents" class="column is-one-quarter"></edm-document>

Document is an interface :

export interface Document {
    id?: Number,
    name: string,
    filePath: string
}

All is working as expected, i.e I get my documents list. But now I would like to access to document variable inside my DocumentComponent (the edm-document tag ponent)

Inside my DocumentComponent template, if I try this it's not working :

<p>{{ document.name }}</p>

I get this error : DocumentComponent.html:1 ERROR TypeError: Cannot read property 'name' of undefined.

I need to enforce document definition like this, and specify document as an input :

<edm-document *ngFor="let document of documents" [document]="document" class="column is-one-quarter"></edm-document>

Now it works but seems a bit redundant to me as I defined a let in loop. Does that mean the variable defined with let is only available in tag where ngFor directive is set ?

Am I missing something?

Thanks,

Nicolas

In my first Angular 4 application, I defined a list ponent :

<edm-document *ngFor="let document of documents" class="column is-one-quarter"></edm-document>

Document is an interface :

export interface Document {
    id?: Number,
    name: string,
    filePath: string
}

All is working as expected, i.e I get my documents list. But now I would like to access to document variable inside my DocumentComponent (the edm-document tag ponent)

Inside my DocumentComponent template, if I try this it's not working :

<p>{{ document.name }}</p>

I get this error : DocumentComponent.html:1 ERROR TypeError: Cannot read property 'name' of undefined.

I need to enforce document definition like this, and specify document as an input :

<edm-document *ngFor="let document of documents" [document]="document" class="column is-one-quarter"></edm-document>

Now it works but seems a bit redundant to me as I defined a let in loop. Does that mean the variable defined with let is only available in tag where ngFor directive is set ?

Am I missing something?

Thanks,

Nicolas

• javascript
• angular
• ngfor

Share Improve this question Follow edited Jul 6, 2020 at 20:42 Martijn Pieters 1.1m321321 gold badges4.2k4.2k silver badges3.4k3.4k bronze badges asked Dec 12, 2017 at 17:04 nbonniotnbonniot 1,1361717 silver badges3333 bronze badges 1

• Yeah it is true that you can only acces the document variable in the edm-document tag and in all of its children. – Lucas Rosenberger Commented Dec 12, 2017 at 17:07

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

it works but seems a bit redundant to me as I defined a let in loop

It is not as redundant as it might seem, which bees obvious when rewriting things a bit:

• When not explicitly defining what the ponent should use (with [document]="document" in your example) then how would your ponent know that the parent variable is named document? Consider:

  <edm-document *ngFor="let d of documents" [document]="d"></edm-document>
  

  One could argue that Angular could introduce some parent variable to access the outer loop variable, but then the ponent would know how it's going to be used, and could only be used in a loop. Reusable ponents should not be aware of that.

• How would it know that it can use that loop variable directly, and does not need some child property instead? Like:

  <edm-document *ngFor="let d of documents" [document]="d.text"></edm-document>
  

So: your code is just fine.

Initially during DOM rendering the documents object will undefined

• Use a typesafe ? operator

  <p>{{ document?.name }}</p>
  

• Use a *ngIf with a array length condition as below,

  <span *ngIf="documents.length > 0"> 
     <edm-document *ngFor="let document of documents" [document]="document" 
                   class="column is-one-quarter"></edm-document>
  </span>
  

well you can also do something like this

<edm-document *ngFor="let document of documents" class="column is-one-quarter">
 <span class="something">{{document.name}}</span>
</edm-document>

and in the edm-document.ponent.html do something like

<ng-content select=".something"></ng-content>

The value (document) of the loop is valid inside of that block where the *ngFor placed. In your case between: <edm-document>..</edm-document>

In your example:

<edm-document *ngFor="let document of documents"class="column is-one-quarter">
<p>{{ document.name }}</p> <!-- document.name is valid -->
</edm-document>
<p>{{ document.name }}</p> <!-- document.name is invalid -->

本文标签： javascriptHow to access variable defined in *ngForStack Overflow