我正在创建动态输入字段,它将接受所有类型值。我需要限制只输入数字。
模板:
<tr *ngFor="let item of rowData">
<ng-container *ngFor="let hitem of columnDefs" >
<td *ngIf="!hitem.dropdown; else selectDrop">
<span *ngIf="hitem.edit;else content">
<div *ngIf="editing">
<input [required]="required" [name]="item[hitem.field]" [(ngModel)]="item[hitem.field]" />
</div>
<div *ngIf="!editing">
{{item[hitem.field]}}
</div>
</span>
<ng-template #content>content here... {{item[hitem.field]}} </ng-template>
</td>
<ng-template #selectDrop>
<td>
<select [(ngModel)]="item[hitem.field]">
<option *ngFor="let item of aplAry">{{item}}</option>
</select>
</td>
</ng-template>
</ng-container>
</tr>
data:
mainHead = [{name:'', colspan:1}, {name:'Deatils', colspan:2}]
columnDefs = [
{headerName: 'Make', field: 'make', edit:true },
{headerName: 'Model', field: 'model', dropdown: true },
{headerName: 'Price', field: 'price', edit:true}
];
aplAry = ['Celica','Mondeo','Boxter'];
rowData = [
{ make: 'Toyota', model: 'Celica', price: 35000 },
{ make: 'Ford', model: 'Mondeo', price: 32000 },
{ make: 'Porsche', model: 'Boxter', price: 72000 }
];
堆栈闪电战示例 https://stackblitz.com/edit/angular-4tdg9p?file=src%2Fapp%2Fapp.component.ts