绘制表格后更改表格单元格的样式答案

【问题标题】：Changing style of table cell after table has been drawn绘制表格后更改表格单元格的样式
【发布时间】：2018-03-09 22:01:31
【问题描述】：

我有一个 json 对象，其中包含一个坐标列表，这些坐标代表一块棋盘，另一对坐标代表另一个点（在我的例子中是一只乌龟）。

我可以很好地渲染电路板，但我不知道如何渲染海龟。

我需要使用类似的东西吗：

ang_element = angular.element(id=turtlePos.X + "," + turtlePos.Y ); // Get element by id and color background

还是有更“Angular”的方式？

这是表格（位置 0,1 应该有 css 类“turtle”）：

游戏模型组件.html：

<table *ngIf="gameModel">
  <tr *ngFor="let row of gameModel.board.boardTiles; let i = index">
    <td [attr.id]="i + ',' + y" [ngClass]="{'mine': column == 1, 'exit': column == 2}" *ngFor="let column of row; let y = index">({{i}},{{y}})</td>
  </tr>
</table

游戏模型组件.ts：

import { Component, OnInit } from '@angular/core';
import { GameModel } from '../game-model';
import { GameService } from '../game.service';

@Component({
  selector: 'app-game-model',
  templateUrl: './game-model.component.html',
  styleUrls: ['./game-model.component.css']
})
export class GameModelComponent implements OnInit {

  gameModel: GameModel;
  constructor(private gameService: GameService) { }

  loadedGameModel(gameModel: Object) {
    console.log('Loaded GM');
    console.log(JSON.stringify(gameModel));
    this.gameModel = GameModel.fromJsonObj(gameModel['Result']);
  }

  ngOnInit() {
    console.log('Getting game data');
    this.getGame();
  }

  getGame(): void {
    this.gameService.getGame()
      .subscribe(gameModel => this.loadedGameModel(gameModel));
  }
}

游戏模型.component.css：

table, th , td {
  border: 1px solid grey;
  border-collapse: collapse;
  padding: 50px;
}
table tr:nth-child(odd) {
  background-color: #f1f1f1;
}
table tr:nth-child(even) {
  background-color: #ffffff;
}
.mine {
  background-color: red;
}
.exit {
  background-color: blue;
}

来自这个 json：

{
  "Turtle": {
    "CurrentPosition": {
      "Direction": 0,
      "X": 0,
      "Y": 1
    }
  },
  "Board": {
    "BoardTiles": [
      [
        {
          "TileAssignment": 0
        },
        {
          "TileAssignment": 0
        },
        {
          "TileAssignment": 0
        },
        {
          "TileAssignment": 0
        }
      ],
      [
        {
          "TileAssignment": 0
        },
        {
          "TileAssignment": 1
        },
        {
          "TileAssignment": 0
        },
        {
          "TileAssignment": 0
        }
      ],
      [
        {
          "TileAssignment": 0
        },
        {
          "TileAssignment": 0
        },
        {
          "TileAssignment": 0
        },
        {
          "TileAssignment": 0
        }
      ],
      [
        {
          "TileAssignment": 0
        },
        {
          "TileAssignment": 1
        },
        {
          "TileAssignment": 0
        },
        {
          "TileAssignment": 1
        }
      ],
      [
        {
          "TileAssignment": 0
        },
        {
          "TileAssignment": 0
        },
        {
          "TileAssignment": 2
        },
        {
          "TileAssignment": 0
        }
      ]
    ],
    "Width": 5,
    "Height": 4
  }
}

【问题讨论】：

标签： angular angularjs-directive html-table

【解决方案1】：

我假设你有一个海龟的坐标，你需要根据桌子的坐标把它放在你的表格网格上。另外，我假设您有一个名为 turtle 的组件。

我会尝试在您的双 ngFor 迭代期间绘制它：

<table *ngIf="gameModel">
  <tr *ngFor="let row of gameModel.board.boardTiles; let i = index">
    <td [attr.id]="i + ',' + y" 
        [ngClass]="{'mine': column == 1, 'exit': column == 2}"   
        *ngFor="let column of row; let y = index">
      ({{i}},{{y}})

      <turtle *ngIf="turtlePos.X === i && urtlePos.Y === y"></turtle>

    </td>
  </tr>
</table>

turtle 组件将仅在指定坐标上呈现

【讨论】：

【解决方案2】：

angular 中的每个组件都有生命周期钩子事件。您可以在 ngAfterViewInit 事件中访问 DOM。见https://angular.io/api/core/AfterViewInit

所有事件的参考：https://angular.io/guide/lifecycle-hooks

ngAfterViewInit() {
    ng_element = angular.element(id=turtlePos.X + "," + turtlePos.Y ); 
    //other code
}

【讨论】：