Question

我有动态id生成的表，比如这个

<table>
    <tbody>
        <tr *ngFor="let row of createRange(seats.theatreDimension.rowNum)">
            <td id={{row}}_{{seat}} *ngFor="let seat of createRange(seats.theatreDimension.seatNumInRow)">

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

我想从angular 2 .ts 文件中访问表 td 元素。这是函数：

ngOnInit() {
    this.getSeats();
}

getSeats() {
    this.cinemaService.getAllSeats(this.repertoire.id).subscribe(
        data => {
            this.seats = data.json();   
            this.setReservedSeats();
        }
    )
}
setReservedSeats() {
    this.seats.reservedSeats.forEach(seat => {
            let cssSeatId = seat.rowNumReserved + "_" + seat.seatNumInRowResereved;
            document.getElementById(cssSeatId).className += "reserved";
        }
    )
}

之后我想动态设置每个 td 的 class ，但我在浏览器中收到此控制台错误：

错误类型错误：无法读取null的属性'className'

再次注意我动态生成 td ID。它们的格式为 rowNum_cellNum 。

我从api获取此对象。

{
"theatreDimension": {
    "rowNum": 17,
    "seatNumInRow": 20
},
"reservedSeats": [
    {
        "rowNumReserved": 9,
        "seatNumInRowResereved": 19
    },
    {
        "rowNumReserved": 2,
        "seatNumInRowResereved": 4
    },
    {
        "rowNumReserved": 15,
        "seatNumInRowResereved": 15
    }
]

}

我正在使用theatreDimension来制作表格。然后我尝试使用红色背景（保留）

从reservedSeats数组中保留座位

如何从角度2访问td元素并解决此问题？

Answer 1

您应该尝试使用ngClass指令来设置类，而不是直接访问DOM：

<td [ngClass]="{'reserved': isReserved(row, seat)}" id={{row}}_{{seat}} *ngFor="let seat of createRange(seats.theatreDimension.seatNumInRow)">

</td>

然后，您可以实现isReserved(row, seat)函数，如果它返回true，它将应用reserved类。

isReserved(rowNum: number, seatNum: number) {
    return this.seats.reservedSeats.some((r) => r.rowNumReserved === rowNum && r.seatNumInRowResereved === seatNum);
}

Answer 2

要直接回答您的问题，为了按ID获取元素，您需要在页面被重新搜索后执行此操作。使用函数ngAfterViewInit（）。您需要从getSeats（）中删除对setReservedSeats（）的调用。

ngOnInit() {
    this.getSeats();
}

ngAfterViewInit(){
    this.setReservedSeats();
}

但是，我建议采用不同的路线。您可以根据是否已预留座位来设置元素的样式。假设你有某种＆＃34;保留＆＃34;在座位对象上标记你可以做这样的事情：

<td id={{row}}_{{seat}} 
    [ng-class]="{'reserved' : seat.researved}"
    *ngFor="let seat of createRange(seats.theatreDimension.seatNumInRow)">
</td>

如何在角度2中按ID访问元素

2 个答案: