Pousser un objet dans un tableau d'objets alors toutes les propriétés de l'objet devenu indéfini - Tapuscrit

Question

J'ai essayé de pousser un objet dans un tableau d'objets comme ci-dessous (je veux utiliser cette façon de mettre à jour l'interface utilisateur en utilisant Angular4):

En CampgroundService.ts

export class CampgroundDetail { 
    campground: Campground; 
    comments: Comment[]; 
} 

Dans CampgroundDetailComponent.ts

@Component({ 
    selector: 'campDetail', 
    templateUrl: './app/components/campgrounds/campground.detail.component.html', 
    styleUrls: ['./app/components/campgrounds/campgrounds.component.css'] 
}) 

export class CampgroundDetailComponent { 
    campDetail: CampgroundDetail = new CampgroundDetail(); 

    updateUI(comment: Comment) { 
     console.log(comment); 

     this.campDetail.comments.push(
     { 
      id: comment.id, 
      text: comment.text, 
      campground_id: comment.campground_id, 
      username: comment.username, 
      user_id: comment.user_id 
     }); 

     console.log(this.campDetail.comments); 
    } 
} 

En campground.detail.component.html

<app-comment *ngIf="userdata" [comment]="selectedComment" (insertedComment)="updateUI($event)"></app-comment> 

En CommentFormComponent.ts

@Component({ 
    selector: 'app-comment', 
    templateUrl: './app/components/campgrounds/comment.form.component.html', 
    styleUrls: ['./app/components/campgrounds/campgrounds.component.css'] 
}) 

export class CommentFormComponent { 
    @Output() insertedComment = new EventEmitter<Comment>(); 

    doSubmit() { 
     this.comment.user_id = this.userdata.id; 
     this.comment.username = this.userdata.username; 
     this.comment.campground_id = this.campground_id; 

     this.campgroundService.createComment(this.comment) 
      .then(data => { 
       this.campgroundService.getComment(data.comment_id) 
        .then(comment => this.insertedComment.emit(comment)); 
      }).catch(error => { 
      if (error.status === 403) { 
       this.userService.flush(); 
       this.router.navigate(['/login']); 
      } 
     }); 
    } 
} 

Selon le premier journal de la console, l'objet comment n'est pas nul.

Cependant, après avoir poussé dans le tableau toutes les propriétés de l'objet est devenu undefined.

J'ai essayé de lancer une recherche sur Google, autant que possible, mais je ne trouve toujours pas de solution. Qu'est-ce que je rate? J'apprécierai si quelqu'un me donnerait n'importe quelle suggestion.

Answer 1

J'ai finalement trouvé une solution. Je modifié CampgroundService.ts

export class CampgroundDetail { 
    campground: Campground; 
    comments: any[]; 
} 

Modifiés CampgroundDetailComponent.ts

@Component({ 
    selector: 'campDetail', 
    templateUrl: './app/components/campgrounds/campground.detail.component.html', 
    styleUrls: ['./app/components/campgrounds/campgrounds.component.css'] 
}) 

export class CampgroundDetailComponent { 
    campDetail: CampgroundDetail = new CampgroundDetail(); 

    updateUI(comment: Comment) { 
     let tempComment = comment['comment']; 
     this.campDetail.comments.push(tempComment); 
    } 
} 

Il fonctionne maintenant.