Вставить строку при нажатии на плитку

Question

Я использую angular, и я хотел бы отобразить элементы списка в 2 столбца.Затем, когда я нажимаю «плитку», я бы хотел, чтобы под ней вставлялась строка, но без изменения фактических строк.

Так, например, если у меня есть эта таблица

| 1 | 2 |
|---|---|
| 3 | 4 |

Когда я нажимаю на плитку «1» или «2», я хотел бы получить следующее, где R - новая строка:

| 1   | 2  |
|-----|----|
|     R    |
|-----|----|
| 3   | 4  |

Я пытался использовать следующий код:

<div class="row>
        <div class="col-6" *ngFor="let element of list">
                {{ element.myContent }}
                <div class="row" *ngIf='myCondition'>
                        {{ myNewRow }}
                </div>
        </div>
</div>

Конечно, вывод:

| 1   | 2  |
|-----|----|
|  R  |    |
|-----|----|
| 3   | 4  |

<div class="row>
        <ng-container *ngFor="let element of list">
                <div class="col-6">
                        {{ element.myContent }}
                </div>
                <div class="col-12" *ngIf='myCondition'>
                        {{ myNewRow }}
                </div>
        </ng-container>
</div>

Вывод - это то, что мне нужно, когда я нажимаю на плитку в правом столбце.Но с плиткой 1 в левом столбце вывод:

| 1   | 
|-----|----|
|     R    |
|-----|----|
| 2   | 3  |
|-----|----|
| 4   | 

Я понимаю, почему я получаю все эти выводы.Но есть ли способ получить желаемый результат?

Answer 1

Так что в основном вам нужно работать с данными, а не с html , поэтому, когда вы добавляете строку, вам необходимо добавить ее в ваш массив , и она будет отображаться с помощью директивы.И вам необходимо добавить логический флаг к элементу, который показывает, является ли строка одного столбца или нет.

HTML-шаблон

<div class="row>
        <ng-contanier *ngFor="let element of list; index as i">
                <div [ngClass]="getClass(i)" (click)="onCellClick(i)">
                      {{ element.myContent }}
                </div>
        </ng-container>
</div>

Ts файл

.....
list: any[];
.....
getClass(i: number): string {
   // here you will have new flag at each item that indicates whether it's one column row
   return this.list[i].oneColumnRow ? 'col-12' : 'col-6';
}
.....
onCellClick(i: number): void {
   // here you just add new row with custom content and one-column-row flag set to true
   const newRow = { myContent: 'content', oneColumnRow: true };
   this.list.splice(i+1, 0, newRow);
}
......

Надеюсь, это поможет.