我如何通过ID在角2

访问元素表有这样一个我如何通过ID在角2

<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>

我想从角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的类，但我在我的浏览器中获取此控制台错误：

错误类型错误：无法读取属性'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元素和解决这个问题？

来源

2017-11-11 Aleksandar

代码中'cssSeatId'的值是多少？你有检查吗？ – Niladri

在此的forEach我正确地形成cssSeatId，所以在形式上rowNum_seatNum：9_19，2_4，15_15。即与我通过api – Aleksandar

不是直接访问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); 
}

来源

2017-11-11 17:53:15 user184994

我实现得到了JSON “isReserved根据（的rowNum：编号，seatNum：数）{ this.seats.reservedSeats.forEach（座椅=> { 如果（seat.rowNumReserved ==的rowNum &&座位。seatNumInRowResereved == seatNum）{ return true; } else { return false; } } ） }” 和使用 [ngClass] = “{ '保留'：isReserved（行，座位）}” 但没有结果。 – Aleksandar

这是因为你的'isReserved'函数不返回任何值。您的退货声明在回调之内，所以只能从回调中得到回报 – user184994

您能否再解释一下？我的功能应该如何？ – Aleksandar

直接回答你的问题，为了通过ID来获取元素，你需要做这样的页面已经被renedered之后。使用函数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>

来源

2017-11-11 17:34:03 SKennick

我如何通过ID在角2

回答

相关问题