如何將ngStyle限制爲單個元素並非全部

我已經使用嵌套的ngFor循環動態創建了一個表。當我將鼠標懸停在其中一個跨度上時，所有跨度的背景顏色都會改變。我希望和期望的行爲是，背景只會改變我所處的範圍，而不是同時改變所有人。如何將ngStyle限制爲單個元素並非全部

<div *ngFor="let col of table; let j=index"> 
    <span *ngFor="let row of col; let i=index" (mouseover)="hover=true" (mouseleave)="hover=false" [ngStyle]="{backgroundColor: hover==true ? 'lightblue' : 'transparent'}">{{ row['r' + j + 'c' + i] }} 
    </span> 
</div>

這是表對象是如何創建的，

table: {}[] = []; 
    cols: {}[]= []; 
    cell: {}= null; 
    c:number; 
    r:number; 
    key: string = null; 
    rowslength:number = 2; 
    columnslength:number = 2; 

    constructor() { 
    this.makeTable(); 
    } 

    makeTable(){ 
      for(this.r = 0; this.r < this.rowslength; this.r++){ 
      for(this.c = 0; this.c < this.columnslength; this.c++){ 
       this.key = "r" + this.r + "c" + this.c; 
       this.cell = { [this.key]: this.key }; 
       this.cols.push(this.cell); 
      } 
      this.table.push(this.cols); 
      this.cols = []; 
     } 
     }

來源

2017-07-01 Shane G

您正在使用布爾型「懸停」變量來指定行i和列j懸停。這不可能工作。布爾值不能存儲行和列。而是存儲懸停的單元格的行和列。如果單元格的行和列等於懸停單元格的行和列，則在單元格上應用背景顏色。 –

好吧，我認爲它應該適用於跨度懸停。感謝您的解釋，我會繼續努力。 –

爲了突出被mouseovered細胞。

<div *ngFor="let col of table; let j=index"> 
     <span *ngFor="let row of col; let i=index" 
      (mouseover)="columni=i; rowj=j" 
      [ngStyle]="{backgroundColor: 
      rowj==j && columni==i ? 'lightblue':'transparent'}"> 
     {{ row['r' + j + 'c' + i] }} 
     </span> 
    </div>

來源

2017-07-01 18:52:55

如何將ngStyle限制爲單個元素並非全部

回答

相關問題