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

Question

我正在尝试使表可配置。在此之前，我正在制作演示组件，通过它我可以制作自己的可配置表。
我想传递一些东西到我的 table 上，比如 column names和 data .
列名我想这样传递:

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

dataType上述说明此列将具有输入类型 text什么时候 editable ，同样适用于 number和 date以及。
我想根据这个值显示输入框，但在 <td>我无法检查此 dataType key 。我试过这个:

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 file

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;
  }

有什么办法，以便我可以检查列数据类型，并基于此我可以在单击 edit 时在该行的单元格中显示该输入框按钮？提前致谢!!!

Answer 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'}];

此外，您需要遍历 View 模板中的 header 以获取 mappingProperty 并确定它具有哪种数据类型。
这是可能的解决方案:

<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>