离子按钮单击以更改网格的下一列或下一行的颜色答案

【问题标题】：ionic button click to change the color of the next column or row of a grid离子按钮单击以更改网格的下一列或下一行的颜色
【发布时间】：2020-11-25 16:40:41
【问题描述】：

我对 ionic 和 Angular 还是很陌生。我从一个二维数组和 2 个按钮“下一列”和“下一行”动态地制作了一个网格。

  <ion-grid >
   <div *ngFor="let row of grid">
     <div  *ngFor="let div of row" class="no-color">
      {{div}}
     </div>
   </div>
  </ion-grid>

  <ion-button (click)="SetColorToNextDiv()"> Next Div </ion-button>
     
  <ion-button (click)="SetColorToNextRow()"> Next Row </ion-button>

当我单击从第一行的第一列开始的相应按钮时，我要做的是在网格中“导航”，将背景颜色设置为下一列或下一行。示例：

从所有 div 'no-color' 开始。点击下一行按钮第 1 行中的 div 1 设置类“ClassColor”，其余所有“无颜色”。单击下一个 div 按钮第 2 行中的 div 1 设置类 'ClassColor' ，其余的都是 'no-color'。点击下一行按钮第 2 行中的 div 2 设置类“ClassColor”，其余所有“无颜色”。等等等等

使用离子/角度实现它的最佳方法是什么？我想我可以在 ngfor 中设置一个 id 属性，然后通过 id 设置类，例如document.getElementById(id).className = "ClassColor";，但我相信有更好的方法。

【问题讨论】：

请添加一些代码

标签： css angular ionic-framework ion-grid

【解决方案1】：

我认为这可能会有所帮助。

<div>
  <div class="row" *ngFor="let row of data;let ri = index;">
    <span class="col" [class.selected]="ri === r && ci === c" *ngFor="let col of row;let ci = index;">
      {{col}}
    </span>
  </div>
</div>

r 和c 是组件的成员变量。通过在按钮单击时调整r 和c，您可以更改所选元素。

【讨论】：