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

发布时间：2020-12-17 17:32:14 所属栏目：安全来源：网络整理

导读：我正在查看一个示例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"/movi

我正在查看一个示例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);

但是电影的价值是不确定的.我不明白的是什么？

先感谢您.

解决方法

您可以在值上使用该集

import { Component,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
  }

}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!