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

It's hard to tell without knowing what data do you get from the API. But so far it looks like the problem is there. — Alexey Zelenin
– Alexey Zelenin, Commented Apr 3, 2022 at 13:04
I think it's the problem of the usage of ckeditor. I can not reproduce in input — xianshenglu
– xianshenglu, Commented Apr 3, 2022 at 13:14

Nader · Accepted Answer · 2022-04-03 13:34:44Z

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"

edited Apr 3, 2022 at 13:34

answered Apr 3, 2022 at 13:08

Nader

2101 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Ashok K Over a year ago

Thank you for your time. I try this But I receive an undefined value on this this.selectedEditCellId

Nader Over a year ago

I updated the answer to fill "selectedEditCellId", also, in the table tbody, use <td> instead of <th> @AshokK

Ashok K Over a year ago

Yes now I got your answer but I have another problem when I click the first-row edit button another row has been hiding. Please check the screenshot. Right now i edited the my question with screenshot url [![enter image description here][2]][2]

Nader Over a year ago

Check the conditions on <td> tags.

Nader Over a year ago

Update getEditorValue() to set editorStatus to false and selectedEditCellId to null, and remove the parameter cellId @AshokK

|

Collectives™ on Stack Overflow

How can I edit the particular data from API in angular

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related