在单击“编辑”上，只有表的特定行才能转换为可编辑选项-Angular 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

您需要在每个editbox上添加[（ngmodel）]

例如：

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