Question

我正在尝试对ParentObject-> Row-> Cell进行基本的Angular显示。因此，ParentObject有一个行数组，每行都有一个单元格数组。

我的父对象如下：

export class ParentObject implements OnInit {
  private gameRows: GamerowComponent[];

  constructor() {
    this.gameRows = [];

    for (var i: number = 0; i < 11; i++) {
      this.gameRows[i] = new GamerowComponent();
    }

  this.gameRows[1].gameCells[0].text = 'A';
  this.gameRows[2].gameCells[0].text = 'B';
  this.gameRows[3].gameCells[0].text = 'C';
  this.gameRows[4].gameCells[0].text = 'D';
  this.gameRows[5].gameCells[0].text = 'E';
  this.gameRows[6].gameCells[0].text = 'F';
  this.gameRows[7].gameCells[0].text = 'G';
  this.gameRows[8].gameCells[0].text = 'H';
  this.gameRows[9].gameCells[0].text = 'I';
  this.gameRows[10].gameCells[0].text = 'J';
}

GameRow仅通过属性公开游戏单元：

export class GamerowComponent implements OnInit {
  private _gameCells: GamecellComponent[];

  constructor() {
    this._gameCells = [];
    for (var i:number=0; i < 11; i++) {
      this._gameCells[i] = new GamecellComponent();
    }
  }

  ngOnInit() {
  }

  get gameCells(): GamecellComponent[]{
    return this._gameCells;
  }

  set gameCells(value: GamecellComponent[]) {
    this._gameCells = value;
  }
}

单元格只是一个文本和cssclass对象：

export class GamecellComponent implements OnInit {
  private _text: string;
  private _cssClass: string;

  constructor() {
    this._cssClass = 'tablemarker';
  }

  ngOnInit() {
  }

  get text(): string {
    return this._text;
  }

  set text(value: string) {
    this._text = value;
  }
  get cssClass(): string {
    return this._cssClass;
  }

  set cssClass(value: string) {
    this._cssClass = value;
  }
}

我为表格/行/单元格视图设置了html：

ParentObject：

<table class="no-spacing">
  <tr *ngFor="let gameRow of gameRows">
    <app-gamerow></app-gamerow>
  </tr>
</table>

游戏行：

<app-gamecell *ngFor="let cell of gameCells"></app-gamecell>

游戏单元：

<td class="{{cssClass}}">{{text}}</td>

我正确地获得了一个包含11行和单元格的HTML表。 cssClass正确呈现，但文本从不显示。

实例化11行后，当我在浏览器中中断脚本时，它们的文本均已正确设置。静态设置的cssClass文本如何工作（在类构造函数中设置），但是从父级到子级的赋值却不起作用？

Answer 1

您不应该直接实例化组件，而是将其留给Angular。

相反，将数据保存在普通对象中，然后将其传递到组件中。

在GameCellComponent中，您可以添加输入，如下所示：

@Input()
public text: String;

@Input()
public cssClass: String;

然后您可以像这样传递这些值：

<div *ngFor="let cell of gameCells">
  <app-gamecell [text]="cell.text" [cssClass]="cell.cssClass"></app-gamecell>
</div>

Answer 2

您应该通过@Input将值传递给child。下面是代码的修改版本。

父项

<table class="no-spacing">
  <tr *ngFor="let gameRow of gameRows">
    <app-gamerow [row]="gameRow"></app-gamerow>
  </tr>
</table>

游戏行组件

ts

export class GamerowComponent implements OnInit {

 @Input() row; 

  ngOnInit() {
  }
}

html

<app-gamecell *ngFor="let cell of row.gameCells" [cell]="cell"></app-gamecell>

游戏单元组件

ts

export class GamecellComponent implements OnInit {

  @Input() cell; 
  private _cssClass: string;

  constructor() {
    this._cssClass = 'tablemarker';
  }

  ngOnInit() {
  }

  get cssClass(): string {
    return this._cssClass;
  }

  set cssClass(value: string) {
    this._cssClass = value;
  }
}

html

<td class="{{cssClass}}">{{cell.text}}</td>

角度不显示属性值

2 个答案:

父项

游戏行组件

ts

html

游戏单元组件

ts

html