After successfully listing some data from an API using ngFor, I am facing an issue with editing the data. Whenever I click the edit button, it edits the entire data instead of just the specific row. Below is the code snippet for reference:
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
getAdminSystemPreferences() {
this.adminDashboardService.getSystemPreferences().then(resp => {
this.SystemConsent = resp['data'].consent;
});
}
changeEditor() {
this.editorStatus = true;
}
getEditorValue() {
this.editorStatus = false;
}
Screenshot https://i.sstatic.net/msde4.png
https://i.sstatic.net/5fv8O.png
Please provide assistance in resolving this issue.