Angular 如何将ngStyle限制为单个元素而不是所有元素

我使用嵌套的ngFor循环动态创建了一个表。当我将鼠标移到其中一个跨距上时，所有跨距的背景颜色都会改变。我想要和期望的行为是，背景只会在我所处的时间跨度上发生变化，而不会同时对所有人发生变化

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

{{row['r'+j+'c'+i]}

表对象就是这样创建的

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 = [];
        }
      }

表：{}[]=[]；
cols:{}[]=[]；
单元格：{}=null；
c：数字；
r：数字；
键：string=null；
行长度：数字=2；
列长度：编号=2；
构造函数（）{
这个.makeTable（）；
}
makeTable（）{
for（this.r=0；this.r

突出显示鼠标悬停的单元格

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

{{row['r'+j+'c'+i]}

您正在使用布尔

hover

变量来指定行i和列j处于悬停状态。那不可能。布尔值不能存储行和列。而是存储悬停单元格的行和列。如果单元格的行和列与悬停单元格的行和列相等，则在单元格上应用背景色。谢谢你的解释，我会着手做的。