如何将 ngStyle 限制为单个元素而不是全部答案

【问题标题】：How to limit ngStyle to single element not all如何将 ngStyle 限制为单个元素而不是全部
【发布时间】：2017-07-02 02:52:55
【问题描述】：

我已经使用嵌套的 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>

这就是表格对象的创建方式，

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

【问题讨论】：

您正在使用布尔值hover 变量来指定将第 i 行和第 j 列悬停。那是不可能的。布尔值不能存储行和列。而是存储悬停单元格的行和列。如果单元格的行和列等于悬停单元格的行和列，则在单元格上应用背景颜色。
好的，我认为它应该只适用于悬停的跨度。谢谢你的解释，我会继续努力的。

标签： angular ng-style

【解决方案1】：

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

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

【讨论】：