单击编辑时，只有表格的特定行应转换为可编辑选项 - 角度 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">