how to edit only specific row or td/cell in angular table?-CodePudding

When I click the status it should show the select box only on the row where I click the status , right now my issue is when I click edit it edits all the rows.

#html code

   <td 
                            [ngClass]="{'inspection-schedule-property-completed-column': item.status === status.COMPLETED}">
                            <ng-container *ngIf="!showStatus">
                                <span  (click) = editStatus()  *ngIf="item.status !== status.COMPLETED">
                                    {{item.status}}
                                </span>
                            </ng-container>
                            
                            <ng-container *ngIf="!showStatus">
                                <mat-chip-list (click) = editStatus() *ngIf="item.status === status.COMPLETED">
                                    <mat-chip style="background: rgba(76, 175, 80, 0.08);">
                                        <span >{{item.status}} on
                                            {{model.dateCompletedString}}</span>
                                    </mat-chip>
                                </mat-chip-list> 
                            </ng-container>
                            
                             
                            <mat-select *ngIf="showStatus"  >
                                <mat-option *ngFor="let statusItem of status | keyvalue" [value]="statusItem"
                                    (onSelectionChange)="changeStatus($event,item,statusItem)">
                                    {{statusItem.value}}
                                </mat-option>
                            </mat-select>

                        </td>

#ts code

 editStatus() {
    this.showStatus = !this.showStatus;
  }

CodePudding user response：

Here is the example :

<tr *ngFor="let row of backendData; index as i;"  >

          <td >
             {{row.name}}
          </td>
          <td>
            {{row.value}}
          </td>
          <td>
            {{row.description}}
          </td>
          <td>
              <button *ngIf="enableEdit && enableEditIndex == i" (click)="enableEdit=false"  ng-click="cancel()">Cancel</button>
              <button *ngIf="enableEdit && enableEditIndex == i" id="saveBtn"  (click)="saveSegment()" type="submit">Save</button>
              <a href="#"  *ngIf="!enableEdit" (click)="enableEditMethod($event, i)">
                edit
        </a>
          </td>
          <td>

          </td>
        </tr>

ts file :

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  enableEdit = false;
  enableEditIndex = null;
  backendData = [{
    "name": 'Target',
    "value": '100',
    "description": 'abc'
  },
  {
    "name": 'Size',
    "value": '20',
    "description": 'def'
  },
  {
    "name": 'Industry',
    "value": '40',
    "description": 'ghi'
  }]

  enableEditMethod(e, i) {
    this.enableEdit = true;
    this.enableEditIndex = i;
    console.log(i, e);
  }
}