Angular框架中使用ng-zorro-antd实现可编辑的t

想要实现可编辑的表单，需要考虑两个事件，一个是失焦点击事件，另外一个是当用户点击单元格的input时，可以让单元格的input进行编辑。
首先，我们需要在module.ts模块文件导入我们需要使用的组件依赖

import { NgModule } from '@angular/core';
import { HomeRoutingModule } from './home-routing.module';
import { NzFormModule } from 'ng-zorro-antd/form';
import { HomeComponent } from './home.component';
import { FormComponent } from './form/form.component';
import { TableComponent } from './table/table.component';
import { NzInputModule } from 'ng-zorro-antd/input';
import { NzTableModule } from 'ng-zorro-antd/table';
import { NzButtonModule } from 'ng-zorro-antd/button';
import { NzDividerModule } from 'ng-zorro-antd/divider';
import { NzLayoutModule } from 'ng-zorro-antd/layout';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { SharedModule } from '../../../shared/shared.module';
import { CommonModule } from '@angular/common';


@NgModule({
  imports: [SharedModule,NzTableModule,NzLayoutModule,NzDividerModule,HomeRoutingModule,NzFormModule,FormsModule,ReactiveFormsModule,CommonModule,NzInputModule,NzButtonModule],
  declarations: [HomeComponent, FormComponent, TableComponent],
  exports: [HomeComponent]
})
export class HomeModule { }

导入之后，我们开始写表格组件，根据视图的status状态，来控制input的可编辑性。

<nz-content>
  <nz-divider nzText="可编辑的表格"></nz-divider>
  <nz-table #basicTable [nzData]="basicData">
    <thead>
    <tr>
      <th>用户名</th>
      <th>用户编号</th>
      <th>用户地址</th>
      <th>联系方式</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let data of basicData">
      <td>
        <ng-container *ngIf="data.status">
          <input nz-input (blur)="handleBlur(data)" [(ngModel)]="data.userName" [ngModelOptions]="{standalone: true}">
        </ng-container>
        <ng-container *ngIf="!data.status">
          <span (dblclick)="handledblClick(data)">{{data.userName}}</span>
        </ng-container>
      </td>
      <td>{{data.userNo}}</td>
      <td>{{data.userAddr}}</td>
      <td>{{data.userTel}}</td>
      <td>
        <a href="#">查看</a>
        <nz-divider nzType="vertical"></nz-divider>
        <a href="#">删除</a>
      </td>
    </tr>
    </tbody>
  </nz-table>
</nz-content>

在这个模板中，userName这个字段中，通过使用一个status来判断这个单元格的状态，点击输入框时，我们不需要去固定去一些状态的枚举去进行操作，直接取反即可data.status = !data.status。当data.status为true时，表示目前是编辑状态，false则使用span标签只去显示。

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

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.scss']
})
export class TableComponent implements OnInit {

  basicData = [
    {
      key: '1',
      userName: '小张',
      userNo:'20210001',
      userAddr:'湖南省长沙市',
      userTel:'112121221221',
      status: false
    },
    {
      key: '2',
      userName: '小米',
      userNo:'20210002',
      userAddr:'浙江省杭州市',
      userTel:'3123123131212',
      status: false
    },
    {
      key: '3',
      userName: '小刘',
      userNo:'20210003',
      userAddr:'江苏省南京市',
      userTel:'2131212112',
      status: false
    }
  ];

  constructor() { }

  ngOnInit(): void {
  }

  handledblClick(data: { status: boolean; }) {
    data.status = !data.status;
  }

  handleBlur(data: { status: boolean; }) {
    data.status = !data.status;
  }

}

输入框的{ standalone: true }时不会发生(不会添加到FormGroup中)