How can I edit the particular data from API in angular

Question

Actually, I have listed some data from API using ngFor and it's working fine. But I have a problem with editing the data. When I click the edit button it's editing the overall data but I want to edit the particular row only. Here is my code. Please refer

HTML

<table class="table table-striped" style="width: 98%; margin: 10px auto;">
                <thead>
                    <tr>
                        <th><strong>Name</strong></th>
                        <th><strong>Consent Type</strong></th>
                        <th><strong>Updated At</strong></th>
                        <th><strong>Status</strong></th>
                        <th><strong>Content</strong></th>
                        <th></th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let consent of SystemConsent">
                        <th *ngIf="!editorStatus">{{consent.fileName}}</th>
                        <th *ngIf="editorStatus"><input type="text" value="{{consent.fileName}}" class="form-control"></th>

                        <th *ngIf="!editorStatus">{{consent.type}}</th>
                        <th *ngIf="editorStatus"><input type="text" value="{{consent.type}}" class="form-control"></th>

                        <th>{{consent.updatedAt}}</th>

                        <th *ngIf="!editorStatus">{{consent.status}}</th>
                        <th *ngIf="editorStatus"><input type="text" value="{{consent.status}}" class="form-control"></th>

                        <th *ngIf="!editorStatus" [innerHTML]="consent.content"></th>
                        <th *ngIf="editorStatus">
                            <ckeditor name="htmlEditor" [config]="config" [editor]="Editor" [(ngModel)]="consent.content" skin="moono-lisa" language="en">
                            </ckeditor>
                        </th>

                        <th><button class="btn trans-btn list-head-btn ng-star-inserted btn-gradient" (click)="changeEditor()">Edit</button></th>
                        <th><button [disabled]="!editorStatus" class="btn trans-btn list-head-btn ng-star-inserted btn-gradient" (click)="getEditorValue()">Save</button></th>
                    </tr>
                </tbody>
            </table>

Typescript

getAdminSystemPrefrences() {
    this.adminDashboardService.getSystemPreferences().then(resp => {
      this.SystemConsent = resp['data'].consent;
    });
}

changeEditor() {
    this.editorStatus = true;
}
  
getEditorValue() {
    this.editorStatus = false;
}

Screenshot

Please Help me to fix this issue

Answer 1

You should define smth as a unique cell identifier (id, name, ...) in the data.

Define a public property to store the editing cell id

public selectedEditCellId; // number, string, UUID, etc

on invoking the edit mode, pass the cell id

changeEditor(cellId) {
    this.selectedEditCellId = cellId;
    this.editorStatus = true;
}

pass the cell ID on click

<td *ngIf="!editorStatus" (click)="changeEditor(CELL_ID)">{{consent.status}}
</td> 
<td *ngIf="editorStatus && consent.id === selectedEditCellId"> 
  <input type="text" value="{{consent.status}}" class="form-control"> 
  <button (click)="changeEditor(undefined)">close editior</button>
</td>

then you can update the *ngIf condition to check the editorStatus property and the identifier

*ngIf="editorStatus && consent.id === selectedEditCellId"