Async Bindung angular2

Question

Ich wollte einen Wert von meiner Komponente ImageDetail auf die Komponente ImageComment wie

ImageDetailHtml binden:

<image-comment [photo]="photo"></image-comment> 

ImageCommentComponent:

export class ImageCommentComponent { 
    @Input('photo') photo: Photo; 

und zeigen diese Werte in meine ImageCommentHtml :

<h3>{{user.userName}}</h3> 
    <h4>{{photo.title}}</h4> 
    <p>{{photo.description}}</p> 

Das Problem ist, dass die Daten des Fotos nach dem Erstellen des ImageCommentHtml geladen werden und ich die Werte nicht erhalte. Irgendwelche Ideen oder Beispiele, wie ich dieses asynchrone Problem lösen kann? Ich habe sehr viel ausprobiert und nichts hat funktioniert.

Gibt es eine Möglichkeit, die untergeordnete Komponente später zu laden?

** UPDATE ** die Lösung versucht:

<image-comment *ngIf="photo" [photo]="photo"></image-comment> 

und es funktioniert immer noch nicht. Ich habe ein paar Logger:

ngAfterViewChecked() { 
    console.log("After view checked: " + 'photo', this.photo) 
    } 

    ngOnInit() { 
    console.log("On Init: " + 'photo', this.photo) 
    } 

und das Ergebnis ist:

On Init: photo Photo {} 
image-comment.component.ts:42 After view checked: photo Photo {} 
image-comment.component.ts:42 After view checked: photo Photo {} 
image-comment.component.ts:42 After view checked: photo Photo {} 
image-comment.component.ts:42 After view checked: photo Photo {} 
image-comment.component.ts:42 After view checked: photo Photo {} 
image-comment.component.ts:42 After view checked: photo Photo {} 
image-comment.component.ts:42 After view checked: photo Photo {} 
image-comment.component.ts:42 After view checked: photo Photo {} 
image-comment.component.ts:42 After view checked: photo Photo {} 
image-comment.component.ts:42 After view checked: photo Object {photoId: 4, photoName: "#love", photoTitle: "me", photoDescription: null, imageName: "Unbenannt.PNG"…} 

So ist es immer noch zu spät geladen :( ImageDetailComponent

//COMPONENTS 
    import {Component} from '@angular/core'; 
    import {Router, ActivatedRoute, Params} from '@angular/router'; 
    import {ImageCommentComponent} from './image-comment.component.ts' 
    //SERVICES 
    import {UserService} from '../services/user.service'; 
    import {PhotoService} from '../services/photo.service'; 
    //MODELS 
    import {User} from '../models/user.model'; 
    import {Photo} from '../models/photo.model'; 
    //SETTINGS 
    import {LocalStorageSettings} from '../properties/localstorage.properties'; 

    @Component({ 
     selector: 'image-detail', 
     templateUrl: 'app/components/image-detail.component.html', 
     providers: [PhotoService,UserService] 
    }) 

    export class ImageDetailComponent { 
     photo: Photo = new Photo(); 
     like: string; 
     user: User; 
     imageUrl: string; 



     constructor(
     private photoService: PhotoService, 
     private userService: UserService, 
     private route: ActivatedRoute 
    ) { 
     let photoId: any; 
     this.route.params.forEach((params: Params) => { 
      photoId = +params['id']; 
     }); 
     this.photoService.getPhotoByPhotoId(photoId).subscribe(
      photo => { 
      this.photo = JSON.parse(JSON.parse(JSON.stringify(photo))._body); 
      this.imageUrl = "http://localhost:8080/images/" + this.photo.imageName; 

      this.userService.getUserByName(`${LocalStorageSettings.getLocalUsername}`).subscribe(
       user => { 
       this.user = JSON.parse(JSON.parse(JSON.stringify(user))._body); 
       if(this.user.likedPhotoList.filter(photo => photo.photoId == this.photo.photoId)[0]) { 
        this.like="Unlike"; 
       } else { 
        this.like="Like"; 
       } 
       }, 
       error => console.log(error) 
      ) 
      }, 
      error => console.log(error) 
     ) 
     } 

     goBack() { 
     window.history.back(); 
     } 

     likeDisplay() { 
     if(this.like == "Like") { 
      this.like = "Unlike"; 
      this.user.likedPhotoList.push(this.photo); 
      this.photo.likes+=1; 
      this.userService.updateUser(this.user).subscribe(); 
      this.photoService.updatePhoto(this.photo).subscribe(); 
     } else { 
      this.like = "Like"; 
      for(let i = 0; i < this.user.likedPhotoList.length; i++) { 
      if(this.user.likedPhotoList[i].photoId == this.photo.photoId) { 
       this.user.likedPhotoList.splice(i,1); 
      } 
      } 

      this.photo.likes-=1; 
      this.userService.updateUser(this.user).subscribe(); 
      this.photoService.updatePhoto(this.photo).subscribe(); 
     } 
     } 
    } 

ImageDetailHtml:

<div class="pusher"> 
    <div class="ui inverted vertical segment"> 
    <div class="ui text container"> 
     <div class="center aligned"> 
     <img src="{{imageUrl}}" class="ui image centered" /> 
     </div> 
     <br> 
     <div class="ui grid"> 
      <div class="left floated six wide column" style="cursor:pointer; color:grey;"> 
      <span (click)="goBack()"><i class="long arrow left icon">Back</i> </span> 
      </div> 
      <div class="left floated ten wide column right aligned" style=" color:grey;"> 
      <i class="thumbs outline up icon"></i>{{photo.likes}} &nbsp;&nbsp;&nbsp; 
      <a style="cursor: pointer" (click)="likeDisplay()">{{like}}</a> 
      </div> 
     </div> 
    </div> 
    </div> 
</div> 
<image-comment *ngIf="photo" [photo]="photo"></image-comment> 

ImageCommentComponent:

//COMPONENTS 
import {Component} from '@angular/core'; 
//MODELS 
import {User} from '../models/user.model'; 
import {Photo} from '../models/photo.model'; 
// SERVICES 
import {UserService} from '../services/user.service'; 
import {AddPhotoService} from '../services/add-photo.service'; 
import {UploadPhotoService} from '../services/upload-photo.service'; 
// SETTINGS 
import {LocalStorageSettings} from '../properties/localstorage.properties'; 

@Component({ 
    selector: 'add-photo', 
    providers: [UploadPhotoService, AddPhotoService], 
    templateUrl: 'app/components/add-photo.component.html' 
}) 
export class AddPhotoComponent { 
    newPhoto: Photo = new Photo(); 
    photoAdded: boolean = false; 
    user: User; 

    constructor (
    private uploadPhotoService: UploadPhotoService, 
    private addPhotoService: AddPhotoService, 
    private userService: UserService 
) {} 

    onSubmit() { 
    var userName: string = localStorage.getItem(`${LocalStorageSettings.LOCAL_STORAGE_USERNAME}`); 
    this.userService.getUserByName(userName).subscribe(
     user => { 
     this.user = JSON.parse(JSON.parse(JSON.stringify(user))._body); 
     console.log(this.user); 
     this.newPhoto.user = this.user; 
     this.addPhotoService.sendPhoto(this.newPhoto).subscribe(
      data => { 
      this.photoAdded = true; 
      this.newPhoto = new Photo(); 
      }, 
      error => console.log(error) 
     ) 
     }, 
     error => console.log(error) 
    ) 
    } 
} 

ImageComponentHtml:

<div class="ui text container"> 
    <h3>{{user.userName}}</h3> 
    <h4>{{photo?.title}}</h4> 
    <p>{{photo?.description}}</p> 

    <div class="ui comments"> 
    <h3 class="ui dividing header">Comments</h3> 

    <div class="comment" *ngFor="let comment of photo.commentList"> 
     <div class="ui grid"> 
     <div class="two wide column"> 
      <img src="http://localhost:8080/pic/avatar1.png" class="ui image tiny"> 
      <span class="author">{{photoComment.userName}}</span> 
     </div> 
     <div class="fourteen wide column"> 
      <div class="ui blue message"> 
      <div class="content"> 
       <div class="text"> 
       {{photoComment.content}} 
       </div> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    <br> 
    <div class="ui grid"> 
     <div class="two wide column"> 
     <img src="http://localhost:8080/pic/avatar1.png" class="ui image tiny"> 
     <span class="author">{{user.userName}}</span> 
     </div> 
     <div class="fourteen wide column"> 
     <form class="ui form" (ngSubmit)="onSubmit()" #commentForm="ngForm"> 
      <div class="field"> 
      <textarea #words rows="3" placeholder="Add a comment" required [(ngModel)]="photoComment.content" name="photoCommentContent"></textarea> 
      </div> 
      <button type="submit" class="ui red button">Comment</button> 
     </form> 
     </div> 
    </div> 
    </div> 
</div> 

Answer 1

Sie *ngIf Direktive verwenden könnte ImageCommentComponent Belastung erst nach Variable photo empfängt Daten nicht vor machen:

<image-comment *ngIf="photo" [photo]="photo"></image-comment> 

Edit:

Problem liegt in Ihrer ImageDetailComponent - Sie initialisieren Variable photo:

photo: Photo = new Photo(); 

Sie sollten es nur erklären, wie folgt aus:

photo: Photo; 

Auf diese Weise Wert von photoundefined sein und ImageCommentComponent wird nicht geladen bis photo empfängt Daten.