Question

我正在尝试将数据输入到子组件中，该子组件是对象中的一个对象。我有2种型号：

标题：

瓷砖

import { Tile } from "./tile";

export class Tiles {
    public tileOne: Tile;
}

我的父母班，董事会

export class Tile {
    public squareId: number;
}

和模板：

export class BoardComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    const tiles = new Tiles();
    tiles.tileOne = new Tile();
    tiles.tileOne.squareId = 1;
  }
}

和子类，正方形：

<div class="row row-1">
   <square class="square-component" [tile]="tiles.tileOne"></square>
</div>

控制台抛出此错误：

'ERROR TypeError：无法读取未定义的属性'tileOne'

我不理解为什么export class SquareComponent implements OnInit { @Input() tile: Tile; constructor() { } ngOnInit() { } }会是tileOne的原因，因为它是在板类的'undefined'中初始化的。

任何帮助将不胜感激。

Answer 1

添加安全的导航运算符以检查该值是否存在，

 <square class="square-component" [tile]="tiles?.tileOne"></square>

编辑

您需要使用 this

分配值

ngOnInit() {
    const tiles = new Tiles();
    tiles.tileOne = new Tile();
    tiles.tileOne.squareId = 1;
    this.tiles = tiles;
}

Answer 2

至少在您提供的代码中，tile对象没有分配给组件。因此，它将在模板中不可用。试试：

long_index

Angular 2+尝试从父组件到子组件输入数据

2 个答案: