ионная кнопка нажмите, чтобы изменить цвет следующего столбца или строки сетки

Question

Я новичок в ionic и angular. Я сделал сетку динамически и 2 кнопки "следующий столбец" и "следующий ряд". Я пытаюсь "перемещаться" по сетке, устанавливая цвет фона для соседнего столбца или строки, когда я нажимаю соответствующую кнопку, начиная с первого столбца первой строки.

Пример:

column 1 in row 1 green background, all the rest grey.
click next row button
column 1 in row 2 became green ,all the rest grey.
click next column button
column 2 in row 2 became green , all the rest grey.

как лучше всего этого добиться?

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 нажав кнопку, вы можете изменить выбранный элемент.