クリック編集では、テーブルのその特定の行のみ編集可能なオプションに変換する必要があります - 角度2

Question

私は文書のリストを表示するテーブルを持っています。現在、特定のドキュメントの編集オプション編集をクリックすると、テーブル内のドキュメントのリスト全体が編集可能になります（つまり、入力フォームに変換されます）。しかし、その特定のドキュメント行だけを編集可能にします。以下は私のコードで、

テンプレート

<form [ngFormModel]="documentListForm" (ngSubmit)="onSubmit(documentListForm.value)"> 
        <table id="example" class="display" cellspacing="0" width="100%" class='table table-striped table-bordered' > 
       <thead><tr><th></th><th>Document ID</th><th>Document Type</th><th>Source</th><th>Document Date</th> 
       <th>Trip ID</th><th>Status</th><th>Notes</th><th>Action</th></tr></thead> 

        <tbody> 

        <tr *ngFor="let document of documents " (click)="onSelect(document)" 
         class="truck-list-body"> 
         <td><input type="checkbox" [checked]="isChecked"></td> 
       <td> 
        <span *ngIf="!editMode">{{document.documentId}}</span> 
        <input type="text" class="form-control" value={{document.documentId}} *ngIf="editMode"> 
        </td> 
       <td > 
        <span *ngIf="!editMode">{{document.type}}</span> 
        <input type="text" class="form-control" value={{document.type}} *ngIf="editMode"> 
        </td> 
       <td> 
        <span *ngIf="!editMode">{{document.source}}</span> 
        <input type="text" class="form-control" value={{document.source}} *ngIf="editMode"> 
        </td> 
       <td> 
        <span *ngIf="!editMode">{{document.date}}</span> 
        <input type="date" class="form-control" value={{document.date}} *ngIf="editMode"> 
        </td> 
       <td> 
        <span *ngIf="!editMode">{{document.tripId}}</span> 
        <input type="text" class="form-control" value={{document.tripId}} *ngIf="editMode"> 
        </td> 
       <td> 
        <span *ngIf="!editMode">{{document.status}}</span> 
        <input type="text" class="form-control" value={{document.status}} *ngIf="editMode"> 
        </td> 
       <td> 
        <span *ngIf="!editMode">{{document.notes}}</span> 
        <input type="text" class="form-control" value={{document.notes}} *ngIf="editMode"> 
        </td> 
       <td> 
      <a (click)="save()"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></a> 
      <a (click)="delete(document.documentId)"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a> 
      <a (click)="edit(document)" ><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a> 
     </td> 

      </tr> 

       </tbody> 

       </table> 
      </form> 

コンポーネント

import {Component, OnInit, OnChanges} from '@angular/core'; 
import {NgClass, FORM_DIRECTIVES, Control, ControlGroup, FormBuilder} from '@angular/common'; 
import {ROUTER_DIRECTIVES} from '@angular/router-deprecated'; 
import {DocumentDetailsComponent} from '../documentDetails/documentDetailsComponent'; 
import {DocumentManagementComponent} from '../documentManagement/documentManagementComponent'; 
import {DocumentService} from './documentControlPanelService'; 

@Component({ 
    selector: 'document-controlPanel', 
    templateUrl: 'app/dashboard/features/documents/documentControlPanel/documentControlPanelTemplate.html', 
    directives: [ROUTER_DIRECTIVES, FORM_DIRECTIVES, NgClass, DocumentDetailsComponent, DocumentManagementComponent] 
}) 

export class DocumentControlPanelComponent implements OnInit, OnChanges { 



    documents: any[]; 
    errorMessage: any; 
    isChecked: boolean = false; 
    deleteResponse: any; 
    editMode: boolean ; 
    documentListForm: ControlGroup; 


    // constructor to loop the products in product service file and disply in html 
    constructor(private _documentService: DocumentService, private _formBuilder: FormBuilder){ 

     this.documentListForm = _formBuilder.group({ 

     }) 
    } 

    // initiation of ngOnInit to bind the service or any external data to template on start 
    ngOnInit(): void { 

     this._documentService.getDocuments() 
      .subscribe(
       document => {this.documents = document 
        console.log(this.documents)}, 

       error => this.errorMessage = <any>error) 
    } 

    // on update of info changes to implement 
    ngOnChanges(): void { 

    } 


    edit(document: any){ 

     this.editMode = true; 
    } 

    save(){ 

     this.editMode = false; 

    } 

    delete(documentId: any){ 
     console.log(documentId) 
     this._documentService.deleteDocuments(documentId) 
      .subscribe(
       document =>{this.deleteResponse = document 
        console.log("delete response:...",this.deleteResponse) 
        if (this.deleteResponse.ok == true) { 
         this.onRefreshDocumentList(); 
        }}, 

       error => this.errorMessage = <any>error) 

    } 

} 

は、誰かが私にこのためのソリューションを提供することができます。ありがとうございました。

Answer 1

あなたは、たとえば、各エディットボックス

に[（ngModel）]を追加する必要があります。

<span *ngIf="editedIndex !== i">{{document.status}}</span> 
<input type="text" class="form-control" [(ngModel)]="document.status" value={{document.status}} *ngIf="editedIndex === i">