Question

我正在查看一个示例Angular 2项目并插入一些代码以尝试从传递给嵌套子组件的影片对象中提取值。

在父代码中，我有以下内容：

<div class="col-sm-6 col-md-4 col-lg-3 col-xs-6" *ngFor="let movie of movies; let i = index;">
  <movie-card [movie]="movie"></movie-card>
</div>

在我的movie-card.component.ts文件中，我有这段代码：

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

@Component({
  selector: 'movie-card',
  templateUrl: './movie-card.component.html',
  styleUrls: ['./movie-card.component.css']
})
export class MovieCardComponent {

  @Input()
  movie: Object;

  constructor() {

  console.log('movie : ' + this.movie);
  }

}

Chrome控制台的输出是：

20 movie : undefined  movie-card.component.ts:15

但是在movie-card.component.html

中

 {{movie.Name}}

html将输出电影名称。

我想将movie.Name值发送到我的服务中。

_anatomyService.getImage(this.movie.Name);

然而，电影的价值未定义。我不理解的是什么？

提前谢谢。

Answer 1

您可以使用值

上的设置

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

@Component({
  selector: 'movie-card',
  templateUrl: './movie-card.component.html',
  styleUrls: ['./movie-card.component.css']
})
export class MovieCardComponent {

  @Input()
  set movie(movie: Object){
   console.log(movie);
    //asign it to a value or do something with it
  }

}

Answer 2

你的movie-card.component.ts应该是这样的。

    import { Component, Input, OnInit  } from '@angular/core'; <-- add OnInit 

    @Component({
      selector: 'movie-card',
      templateUrl: './movie-card.component.html',
      styleUrls: ['./movie-card.component.css']
    })
    export class MovieCardComponent {

      @Input()
      movie: Object;

      constructor() { }

    ngOnInit() {     <-- your this.movie should be in ngOnInit lifecycle hook
         console.log('movie : ' + this.movie);
       }

    }

检查此链接是否有更多生命周期挂钩http://learnangular2.com/lifecycle/

Answer 3

构造函数中没有初始化的输入值。你必须等到ngOnInit()

ngOnInit() {
  console.log('movie : ' + this.movie);
}

另请参阅有关angular2生命周期的更多详细信息

https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html

Angular2 Newbie将数据从Parent传递到Child组件

3 个答案: