Как включить текстовую область для одного значения массива, нажав кнопку для этого значения, используя javascript / angular

Question

Мне нужно включить текстовую область для одного значения массива, нажав кнопку для этого значения

Я пытался решить эту проблему наилучшим образом, но мой результат решения выглядит как

Текстовая область включена для каждого значения в массиве

Шаг, который я выполнил, описан ниже

ШАГ 1: app.component. html

Я отображаю массив в файле html

<tbody *ngFor="let items of sectionDetails">
    <tr *ngIf="items.sectionName == item">

        <td>
            {{items.question}}
        </td>
        <td>
            {{items.answer }}
        </td>
        <td>
           <textarea *ngIf=edit"></textarea>
           <span *ngIf="!edit">--</span>
        </td>
        <td>
            {{items.updated_at | date:"MM/dd/yyyy"}}
        </td>
        <td>
            --
        </td>
        <td>
        <button class="btn btn-primary"  (click)="editAnswer()" disabled>
                <i class="fa fa-pencil" aria-hidden="true"></i>
        </button>
        </td>

    </tr>
</tbody>

ШАГ 2: app.component.ts

Я пишу логи c в

edit : boolean = false

editAnswer() {

this.edit = true

}

мне нужно отображать текстовую область только для той строки, для которой нажата кнопка

Ожидаемый результат:

Если пользователь нажимает на правку кнопка строки, текстовая область должна отображаться для этой конкретной строки

Фактический результат:

Теперь, если пользователь нажимает кнопку редактирования строки, текстовая область отображается для весь ряд

Answer 1

Одна из возможностей - добавить свойство к объекту item и присвоить ему имя edit. По умолчанию вы можете установить для этого свойства значение false.

editAnswer(item) {
  item.edit=true;
}

Когда вы нажимаете кнопку в этой строке, вы можете изменить значение item.edit = true. И в таблице также используйте 'item.edit'

<td>
   <textarea *ngIf=item.edit"></textarea>
   <span *ngIf="!item.edit">--</span>
</td>

Answer 2

внесите изменения в ваш шаблон

<textarea *ngIf=item.isEdit"></textarea>

    <button class="btn btn-primary"  (click)="editAnswer(items)" disabled>
                                <i class="fa fa-pencil" aria-hidden="true"></i>
                        </button>

В файле ts

 editAnswer(item) {
      item.isEdit=true;
    }

дайте мне знать, у вас все еще есть проблемы

спасибо