Question

我正在尝试刷新页面以在另一个组件模板中的表格中显示所选值而没有成功，以下代码是一些组成的代码，希望能够使问题变得清晰。所以我有两个组成部分：
TableComponent，显示英雄列表屏幕显示所选英雄的详细信息，这是TableComponent的子项目标是，当您从表格中点击英雄的名字时，详细信息将显示在“屏幕”组件中。所以代码：

 @Component({
  selector: 'heroes-table',
})
export class TableComponent implements OnInit {
  private tableData: Array<Object>; 
  //The component that will display the hero's details
  private screen: Screen;

  ngOnInit() {
    this.tableData = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];
    this.screen = new Screen();
  }

//Function called when a hero is selected from the table view
public onSelect(hero: Object){
  this.screen.setHero(hero);
 }
}

表格： //英雄表：

<div class="table-row-group" *ngFor="let hero of tableData" [class.selected]="hero === selectedHero" (click)="onSelect(hero)"> 
    <div class="table-row" >
      <div class="table-cell">{{hero}}</div>
    </div>
   //Screen is a child
  <screen></screen>
</div>

屏幕：

@Component({
  selector: 'screen',
})
export class Screen {

  private hero: Object;

  constructor() { }

  public setHero(hero: Object){
    this.incident=incident;
    console.log(this.hero)
  }
}

屏幕的模板：

//screen table:
<p>
  Current hero:{{hero}}
</p>

因此，当我在控制台中调试时，我看到所选英雄是在屏幕的setHero方法中打印的，但是屏幕的视图不会刷新，它仍然保留：选择她：不显示任何内容。有什么建议吗？

将对象传递给组件后的Angular2刷新页面

0 个答案: