Question

如何在 angular 2 中通过 id 访问元素

2017-11-11

1684

javascript angular

我有一个使用动态 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 ，但我在浏览器中收到此控制台错误：

ERROR TypeError：无法读取 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 数组中创建保留座位（保留）

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

Answer 1

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

<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();
}

但是，我建议采用不同的方法。您可以根据座位是否已被预订来设置元素的样式。假设您在座位对象上有某种“已预订”标志，您可以执行以下操作：

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