Javascript 如何检查表列数据类型

我试图使表可配置。在此之前，我正在制作演示组件，通过它我可以制作一个自己的可配置表。 我想向我的表传递一些东西，比如，

列名

和

数据

我要传递的列名如下所示：

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

上面的

数据类型

说明，当

可编辑时，此列将具有输入类型
文本
，同样适用于
数字
和
日期

我想基于此值显示输入框，但在
中，我无法选中此
数据类型
键。我试过这个：

html

是否有任何方法，以便我可以检查列数据类型，并基于此，当我单击
edit
按钮时，我能够在该行的单元格中显示输入框？提前感谢
 哦，亲爱的上帝，我过去花了很多时间来创建漂亮的可编辑表格。
我知道这有多烦人，所以我慢慢看了看你的例子

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

这是一个快速而肮脏的版本，我以你为例

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

您需要能够将标题映射到数据的属性，否则您无法识别哪个列表示哪些值，因为它当前在您的示例中是硬编码的

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

此外，您需要遍历视图模板中的头，以获取mappedProperty并确定它具有哪种数据类型

以下是可能的解决方案：

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

享受这个例子的乐趣，如果你需要任何帮助，请告诉我

下面是一个运行示例：

重要提示：这是为每个表编写大量内容的方法。
帮自己一个忙，把它抽象成一个组件并重用它。像这样的一些接口应该可以工作。代码与当前版本非常相似

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


但我们如何获得更改的数据。通过[value]表示我无法在单击Update按钮后获得更新的数据如果需要检查某个特定值是否已更改，则可以使用ngModel，然后检查dirty属性，或者如果希望整列更改，ngModel将自动执行此操作，因为它是双向绑定。您可以通过[（ngModel）]替换[value]。然后这些值将立即更新。请删除此图像，因为它包含我的名字：PI will。哈哈哈…是的，你可以更改数据。。。
<my-table-component [columnDefinition]="headers" [rows]="data"></my-table-component>