您好,我正在开发将angular 4用作前端技术的Web应用程序。 我需要根据用户选项选择创建并显示各种表。可能有8到10个表,具体取决于用户选择的内容。
我是通过在用户选择时在组件中动态创建表头/数据来做到这一点的。
我只填充了LeaveColums(保持表标题)和LeaveData(保持表数据),然后在html页面中呈现它们。
switch (this.chartName) {
case 'Employee': {
if ('B' === this.selectedLabel) {
this.leaveColums = this.employeeBalanceLeaveColumms;
this.employeeService.getBalanceLeaves().subscribe(result => {
for (let i = 0; i < result.length; i++) {
let applyButton = '<button type="button" class="btn btn-success">Success</button>';
let row = [result[i].leaveType.leaveType, result[i].availableBalance , applyButton];
this.leaveData.push(row);
}
});
} else {
this.leaveColums = this.employeeeLeaveColumms;
this.employeeService.getLeaves(this.selectedLabel).subscribe(result => {
for (let i = 0; i < result.length; i++) {
// Safari unable parse 2018-05-23T18:30:00.000+0000 format hence parse it
let appliedOn = result[i].appliedOn.substring(0, result[i].appliedOn.length - 5);
let leaveFrom = result[i].appliedOn.substring(0, result[i].leaveFrom.length - 5);
let leaveTo = result[i].appliedOn.substring(0, result[i].leaveTo.length - 5);
let row = [
result[i].leaveType.leaveType,
result[i].numberOfDays,
this.pipe.transform(new Date(appliedOn), 'shortDate'),
this.pipe.transform(new Date(leaveFrom), 'shortDate'),
this.pipe.transform(new Date(leaveTo), 'shortDate'),
result[i].leaveStatusId.statusDesc,
result[i].leaveReason
];
this.leaveData.push(row);
}
});
}
}
我的html页面是
<div>
<table class="table-bordered table-striped">
<th>{{chartName}} {{selectedLabel}}</th>
<tr>
<th *ngFor="let column of leaveColums">{{column}}</th>
</tr>
<tr *ngFor="let row of leaveData">
<td *ngFor="let data of row">{{data}}</td>
</tr>
</table>
</div>
但是问题是,当我尝试在任何列中添加按钮时,它没有显示为字符串而不是呈现按钮。
可能是由于将<或>字符转换为unicode即(>的<)。如何解决此问题,我不想在html页面中添加if(如果已添加),因为我已经将if else写入了component.ts中以填充数据。