我如何通過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

回答

相關問題