離子按鈕單擊以更改網格的下一列或下一行的顏色

Question

我對 ionic 和 angular 很陌生。 我從一個二維數組和兩個按鈕“下一列”和“下一行”動態地制作了一個網格。

  <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 設置 class 'ClassColor'，所有 rest 'no-color'。 單擊第 2 行中的下一個 div 按鈕 div 1 設置 class 'ClassColor'，所有 rest 'no-color'。 單擊第 2 行中的下一行按鈕 div 2 設置 class 'ClassColor'，所有 rest 'no-color'。 等等等等

使用離子/角度實現它的最佳方法是什么？ 我想我可以在 ngfor 中設置一個 id 屬性，然后通過 id 設置 class，如document.getElementById(id).className = "ClassColor"; 但我相信有更好的方法。

Answer 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 ，您可以更改所選元素。