Ähnliche untergeordnete Komponente lädt nicht von Router-Ausgang

Question

Ich erstelle eine Datei-Upload-Front-End und haben eine Rasteransicht für die Dateien und eine Listenansicht für die Dateien. Beide sind Kinderkomponenten aus einer übergeordneten Vorschaukomponente. Die Skriptdateien sind fast identisch für die Rasteransicht und die Listenansicht. Wenn der Benutzer die Seite mit der Zeile in der URL lädt, wird die Seite geladen und alles funktioniert. Wenn die Seite mit dem Raster in der URL geladen wird, stürzt die Seite ab. Hier ist der Fehler:

Ich kann den Code nicht zeigen, aber ich kann mein Bestes geben, um einen Überblick zu geben. Die übergeordnete Komponente hat nur zwei Direktiven, die untergeordneten Komponenten. Ich route zu ihnen in dem HTML, das der Elternkomponente zugeordnet ist. Wenn die übergeordnete Komponente geladen wird, abonniere ich eine Liste von Dateielementen. In dieser Subskription habe ich die JSON-Antwort, die ich in ein Objekt zerlege, das die Daten enthält. An diesem Punkt habe ich die richtigen Daten. Ich kann diese Daten loggen. Das Objekt, das ich habe, wird dann mit den JSON-Daten gefüllt.

Auch dies funktioniert für eine untergeordnete Komponente, aber nicht die andere. In der Grid-Komponente wird der oben angegebene Fehler beim Laden angezeigt. Es besagt, dass die Eigenschaftenelemente nicht definiert sind. Meine Vermutung ist, dass mit der Grid-Komponente das HTML, das versucht, das "items" -Array zu erreichen, geladen wird, bevor das Abonnement in der Elternkomponente geladen wird. Wenn das das Problem ist, wie gehe ich damit um?

Wenn ich einen Debugger in der getItems-Methode platzieren, die von der untergeordneten Komponente html aufgerufen wird, wird der obige Fehler angezeigt, bevor der Debugger gestartet wird.

-Code für das Netz html - KIND 1

<div *ngIf="isEmpty()" class="full-height"> 
    <app-upload></app-upload> 
</div> 
<div class="grid-container"> 
    <div class="container-width" *ngFor="let file of service.getItems()"> 
    <div class="preview-ico-container"> 
     <img *ngIf="needsLabelIcon(file)" class="img-responsive label-icon-size" src="app/resources/img/ico/{{file.ext}}.ico" alt=""> 
     <img *ngIf="file.type=='image'" class="img-responsive preview-ico-size" alt="Responsive image" src='{{ file.dataUri }}'> 
     <img *ngIf="file.type!='image'" class="img-responsive preview-ico-only" alt="Responsive image" src="app/resources/img/ico/{{file.ext}}.ico"> 
    </div> 
    <div class="preview-img-name-container"> 
     {{ file.fileName }} 
    </div> 
    </div> 
</div> 

-Code für Zeile HTML - KIND 2

<tr class="table-content" *ngFor="let file of service.getItems()"> 

-Code für die Vorschau Typoskript - ELTERN

ngOnInit() { 
    this.getItems(); 
    } 

    getItems() { 
    this.service.Get().subscribe((data) => { 
     debugger //TESTING 
     console.log(data); //TESTING 
     // SetModelView takes a json response and parses it into a an object I 
     // made. This is also where the items array is set, which 
     // service.getItems() looks at in both the child components 
     this.service.setModelView(data); 
     this.isNext_Prev(); 
    }); 
    } 

    isNext_Prev() { 
    if (this.service.modelView && this.service.modelView._links.next) { 
     this.nextDisplay = "inline-block"; 
    } else { 
     this.nextDisplay = "none"; 
    } 
    if (this.service.modelView && this.service.modelView._links.previous) { 
     this.prevDisplay = "inline-block"; 
    } else { 
     this.prevDisplay = "none"; 
    } 
    } 

Wenn ich den Debugger platzieren In meinem Dienst in der Get-Request-Methode, die mit meiner API kommuniziert, ist der Fehler bereits vorhanden. Vor dem ersten HTTP-Request versucht die untergeordnete Grid-Komponente daher, das Array der Dateielemente zu laden.

Answer 1

Wenn Sie zu einer beobachtbaren binden müssen Sie das | async Rohr

<div class="container-width" *ngFor="let file of service.getItems() | async">