I have displayed the data from API. But I can't edit the data properly. When I try to edit a single row it will automatically hide the others row. Here is my code. Please check

HTML

<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">
                        <td *ngIf="!editorStatus">{{consent.fileName}}</td>
                        <td *ngIf="editorStatus && consent.consentFileId === selectedEditCellId"><input type="text" value="{{consent.fileName}}" ></td>

                        <td *ngIf="!editorStatus">{{consent.type}}</td>
                        <td *ngIf="editorStatus && consent.consentFileId === selectedEditCellId"><input type="text" value="{{consent.type}}" ></td>

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

                        <td *ngIf="!editorStatus">{{consent.status}}</td>
                        <td *ngIf="editorStatus && consent.consentFileId === selectedEditCellId"><input type="text" value="{{consent.status}}" ></td>

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

                        <td><button  (click)="changeEditor(consent.consentFileId)">Edit</button></td>
                        <td><button [disabled]="!editorStatus"  (click)="getEditorValue(consent.consentFileId)">Save</button></td>
                    </tr>
                </tbody>

Typescript

SystemConsent: any = [];
  public selectedEditCellId;

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

  changeEditor(cellId) {
    this.selectedEditCellId = cellId;
    this.editorStatus = true;
    console.log(this.selectedEditCellId);
  }
  
  getEditorValue(cellId) {
    this.selectedEditCellId = cellId;
    this.editorStatus = false;
  }

Please help me to reach out this issue..

CodePudding user response：

This is because when you click 'edit', the editorStatus gets set to true and the selectedEditCellId gets set to the id of the item / row that is currently being edited.

If we look at these lines:

<td *ngIf="!editorStatus">{{consent.fileName}}</td>
<td *ngIf="editorStatus && consent.consentFileId === selectedEditCellId"><input type="text" value="{{consent.fileName}}" ></td>

We notice that for the items that are NOT being edited, neither of these *ngIfs evaluate to true - because:

1. editorStatus is set to true
2. consent.consentFileId is not equal to the selectedEditCellId for the row item.

This is also the reason why the {{consent.updatedAt}} is being displayed for the other rows.

A possible fix to the problem would be to change:

<td *ngIf="!editorStatus">{{consent.fileName}}</td>

to

<td *ngIf="!editorStatus || consent.consentFileId !== selectedEditCellId">{{consent.fileName}}</td>