我正在尝试使表可配置。在此之前,我正在制作演示组件,通过它我可以制作自己的可配置表。
我想传递一些东西到我的 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
时在该行的单元格中显示该输入框按钮?提前致谢!!!
最佳答案
哦,亲爱的上帝,我过去花了很多时间来创建漂亮且可编辑的表格。
我知道这有多烦人,所以我花时间看了你的例子。
这是我以您为例的一个快速且非常脏的版本。
您需要能够将标题映射到数据的属性,否则您无法确定哪一列代表哪些值,因为它当前在您的示例中是硬编码的。
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>
关于javascript - 如何检查表列数据类型,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65747437/