javascript - 如何检查表格列的数据类型

我正在尝试使表格可配置。在那之前，我正在制作一个演示组件，通过它我可以制作我自己的可配置表格。我想向我的表格传递一些东西，如列名和数据。

我想这样传递的列名：

headers = [
    {name: 'Sr.No'},
    {name: 'name', dataType: 'text'},
    {name: 'mobile', dataType: 'number'},
    {name: 'date', dataType: 'date'},
    {name: 'Action'}
  ];

上述 dataType 表明当列为 editable 时，该列将使用 text 输入类型，number 和 date 也是同样的情况。

我想根据这些值显示输入框，但在 <td> 中我无法检查这个 dataType 键。我尝试了这样做：

HTML

<table class="row-border border-1 table">
    <thead>
        <tr>
            <th *ngFor="let head of headers">{{head.name}}</th>
        </tr>
    </thead>

    <tr *ngFor="let tableData of data; let i=index">
        <td>{{i+1}}</td>
        <ng-container *ngIf="tableData.isEditable; else viewable">
        <div *ngIf="tableData.dataType ==='text'">
            <input type="text">
        </div>
        <div *ngIf="tableData.dataType ==='date'">
            <input type="date" >
        </div>
        <div *ngIf="tableData.dataType ==='number'">
            <input type="date">
        </div>
        </ng-container>
        <td>
            <button *ngIf="!tableData.isEditable" (click)="onEdit(tableData)">Edit</button>
            <button *ngIf="!tableData.isEditable">Delete</button>
            <button *ngIf="tableData.isEditable" (click)="onSave(tableData)">Update</button>
        </td>

        <ng-template #viewable>
            <td>{{tableData.name}}</td>
            <td>{{tableData.mobile}}</td>
            <td>{{tableData.date}}</td>
        </ng-template>
    </tr>
</table>

ts 文件

headers = [
    {name: 'Sr.No'},
    {name: 'name', dataType: 'text'},
    {name: 'mobile', dataType: 'number'},
    {name: 'date', dataType: 'date'},
    {name: 'Action'}
  ];

  data = [
    {id:1, name: 'sam', mobile: '8788888888', date: '20/11/2021', isEditable: false},
    {id:2, name: 'joy', mobile: '9788888888', date: '22/11/2021', isEditable: false},
  ]

  onEdit(data) {
    this.data.map((item) => {
      item.isEditable = data.id === item.id;
    })
  }

  onSave(data) {
    data.isEditable = false;
  }

有没有办法让我检查列的数据类型，并基于此在我点击编辑按钮时，在该行的单元格中显示输入框？提前谢谢！！！

答案＃1

哦，亲爱的上帝，我过去花了很多时间来创建美观且可编辑的表格。我知道这可能很烦人，所以我花时间查看了你的示例。

这是我根据你的例子做的一个快速而非常粗糙的版本。

你需要能够将表头映射到数据的属性，否则你无法识别哪一列代表哪些值，因为在你的示例中这些是硬编码的。

 headers = [
{name: 'Sr.No'},
{name: 'name', dataType: 'text', mappedProperty: 'name'},
{name: 'mobile', dataType: 'number', mappedProperty: 'mobile'},
{name: 'date', dataType: 'date', mappedProperty: 'date'},
{name: 'Action'}];

此外，你需要遍历视图模板中的标题，以获取映射的属性并弄清它具有哪种数据类型。

这是可能的解决方案：

<table class="row-border border-1 table">
  <thead>
  <tr>
    <th *ngFor="let head of headers">{{head.name}}</th>
  </tr>
  </thead>

  <tr *ngFor="let tableData of data; let i=index">
    <td>{{i + 1}}</td>
    <ng-container *ngIf="tableData.isEditable; else viewable">
      <ng-container *ngFor="let head of headers">
        <ng-container *ngIf="head.mappedProperty">
          <td>
            <input [type]="head.dataType" [(ngModel)]="tableData[head.mappedProperty]">
          </td>
        </ng-container>
      </ng-container>
    </ng-container>
    <td>
      <button *ngIf="!tableData.isEditable" (click)="onEdit(tableData)">Edit</button>
      <button *ngIf="!tableData.isEditable">Delete</button>
      <button *ngIf="tableData.isEditable" (click)="onSave(tableData)">Update</button>
    </td>

    <ng-template #viewable>
      <td>{{tableData.name}}</td>
      <td>{{tableData.mobile}}</td>
      <td>{{tableData.date}}</td>
    </ng-template>
  </tr>
</table>

这是 onEdit 函数。在我看来，你只需要切换 isEditable。但我不确定你在示例中尝试了什么，所以对于任何误解感到抱歉：

  onEdit(tableData: any) {
    tableData.isEditable = !tableData.isEditable;
  }

玩得开心，如果你需要任何帮助，请告诉我。

这是运行示例：

重要：为每个表格写这么多内容太多了。 给自己一个方便，把它抽象成组件并重复使用。像这样的接口应该可行。而且代码与当前的非常相似。

<my-table-component [columnDefinition]="headers" [rows]="data"></my-table-component>