0

我在离子和角度方面很新。我从一个二维数组和两个按钮“下一列”和“下一行”动态地制作了一个网格。

  <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”，其余所有“无颜色”。单击第 2 行中的下一个 div 按钮 div 1 设置类 'ClassColor' ，其余的都是 'no-color'。单击第 2 行中的下一行按钮 div 2 设置类“ClassColor”，其余所有“无颜色”。等等等等

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

4

1 回答 1

0

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

<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单击按钮，您可以更改所选元素。

于 2020-09-09T17:16:56.283 回答