Angular 2+ / Ionic 2+将数据传递给子组件而不绑定

Question

您好我正在尝试将数据从父级传递到子级到其子组件，从父级到子级正常工作但从子级到子级没有显示任何内容（UI未更新？）。

离子父页面（comments.ts）：

...
export class CommentsPage {

  selectedFeedPost: FeedPostModel
  selectedGroupId: string

  commentsList: CommentModel[]

  constructor(private _viewCtrl: ViewController, public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    if (this.navParams.data && this.navParams.data.feedPost && this.navParams.data.groupId) {
      this.selectedFeedPost = this.navParams.data.feedPost
      this.selectedGroupId = this.navParams.data.groupId

      // The rest will be handled in the custom comments components
      this.commentsList = this.selectedFeedPost.comments // Don't have to check again, should only be able to access when feed post has comments.
    }
  }
}

离子页面视图（comments.html）：

...
<ion-content padding>
  <!-- Custom component for holding comments, passing an array of comments to child component -->
  <comments-list *ngIf="commentsList" [commentsList]="commentsList"></comments-list>
</ion-content>
...

子自定义组件（comments-list.ts）：

@Component({
  selector: 'comments-list',
  templateUrl: 'comments-list.html',
  inputs: ['commentsList']
})
export class CommentsListComponent implements OnInit {

  // Used to capture the passed through data from a parent component.
  commentsList: CommentModel[]

  // Used to bind to the UI
  displayList: CommentModel[] = []

  constructor() {}

  ngOnInit() {
    // Component initialization function, first function to be triggered when component is called/loaded/entered.

    // Transform [Object object] to Array of objects, for binding
    for (let i in this.commentsList) {
      this.displayList.push(this.commentsList[i])
    }
  }
}

子自定义组件HTML（comments-list.html）：

<ion-list>
  <ion-item-sliding #itemSlide *ngFor="let comment of displayList">

    <!-- Custom component -->
    <comment-thumbnail [comment]="comment"></comment-thumbnail>

    <ion-item-options>
      <button ion-button color="primary">
        <ion-icon name="alert"></ion-icon>
        Report
      </button>
      <button ion-button color="danger">
        <ion-icon name="trash"></ion-icon>
        Delete
      </button>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>

*直到这里一切正常。 *

当有数据时，子视图的子视图不显示任何内容。

子自定义组件的子项（comment-thumbnail.ts）：

import { Component, OnInit, OnChanges, Input } from '@angular/core';

/* Models & interfaces */
import { CommentModel } from '../../models/comment.model';

@Component({
  selector: 'comment-thumbnail',
  templateUrl: 'comment-thumbnail.html',
  inputs: ['comment']
})
export class CommentThumbnailComponent implements OnInit, OnChanges {

  // Used to capture the passed through data from a parent component.
  @Input() comment: CommentModel

  item: CommentModel

  constructor() {}

  ngOnInit() {
    console.log(this.comment)
    this.item = this.comment
  }

  ngOnChanges() {
    console.log(this.comment)
    this.item = this.comment
  }
}

子自定义组件视图的子项（comment-thumbnail.html）：

<ion-item>
  <ion-avatar item-start>
    <img src="{{ item.created.by.photoUri }}">
  </ion-avatar>
  <h2>{{ item.created.by.name }}</h2>
  <p>{{ item.message }}</p>
  <ion-note item-end>
    {{ item.created.at * 1000 | date:'MMM d, y, h:mm a' }}
  </ion-note>
</ion-item>

Chrome控制台输出：

视图中没有任何内容显示，但数据正在控制台中登录。有什么想法吗？