Wie auf die in * ngFor definierte Variable zugreifen?

Question

In meinem ersten Angular 4-Anwendung, definiert ich eine Liste Komponente:

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

Document ist eine Schnittstelle:

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

Alle wie erwartet funktioniert, das heißt ich meine Dokumente Liste. Aber jetzt würde Ich mag in meiner DocumentComponent auf Dokumentvariable zuzugreifen (der edm-document-Tag-Komponente)

In meiner DocumentComponent Vorlage, wenn ich dies versuchen, es funktioniert nicht:

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

ich diesen Fehler: DocumentComponent.html:1 ERROR TypeError: Cannot read property 'name' of undefined.

ich brauche Dokument Definition wie folgt zu erzwingen, und Dokument als Eingabe angeben:

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

Jetzt funktioniert es aber scheint ein bisschen überflüssig für mich, wie ich eine let In-Schleife definiert. Bedeutet das, dass die mit let definierte Variable nur in einem Tag verfügbar ist, in dem ngFor Direktive gesetzt ist?

Fehle ich etwas?

Danke,

Nicolas

Answer 1

es funktioniert, aber scheint ein wenig überflüssig zu mir, als ich einen eingelassenen Schleife definiert

Es ist nicht so überflüssig, wie es scheinen mag, das wird deutlich, wenn Umschreiben Dinge, die ein bisschen:

• Wenn nicht explizit zu definieren, was die Komponente (mit [document]="document" in Ihrem Beispiel) verwenden, sollte dann, wie würde Ihre Komponente weiß, dass die übergeordnete Variable heißt document? Bedenken Sie:

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

  Man könnte argumentieren, dass Angular einige parent Variable einführen könnte die äußere Schleife Variable zuzugreifen, aber dann würde die Komponente wissen, wie es verwendet werden wird, und nur in einer Schleife verwendet werden könnten. Wiederverwendbare Komponenten sollten sich dessen nicht bewusst sein.

• Wie würde es wissen, dass es diese Schleifenvariable direkt verwenden kann und stattdessen keine Kindeigenschaft benötigt? Wie:

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

Also: Ihr Code ist gut so.

Answer 2

zunächst während DOM die Dokumente Rendering Objekt undefined

• Verwenden Sie eine typsichere ? Operator

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

• Verwenden Sie ein *ngIf wie unten mit einer Arraylänge Zustand

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

Answer 3

Der Wert (Dokument) der Schleife ist gültig im Inneren des Blocks, wo das * ngFor platziert. In Ihrem Fall zwischen: <edm-document>..</edm-document>

In Ihrem Beispiel:

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

Answer 4

gut Sie können auch etwas tun, wie diese

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

und in der edm-document.component.html etwas tun, wie

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