Я динамически создаю таблицу с возможностью фильтрации на основе входных данных в заголовках столбцов.У меня возникла проблема, когда тип данных, возвращаемый из ввода, приводится к строке независимо от типа ввода, , если тип ввода был установлен из переменной .Так что в моем шаблоне, если я перебираю массив class column
и объявляю мой ввод как:
<input matInput [type]="column.dataType" [formControl]="this.formGroup.controls[key]">
, где column.dataType === 'number'
Ввод формы возвращается компоненту в виде строки.Но если я объявлю это как:
<input matInput [type]="number" [formControl]="this.formGroup.controls[key]">
,
, он вернет число.
Вот сокращенный фрагмент кода, для которого не выполняется запуск, для контекста.Почему изменяется входное значение, если я устанавливаю тип из переменной против жесткого кодирования?
@Component({
selector: 'app-filter-table',
templateUrl: './filter-table.component.html',
styleUrls: ['./filter-table.component.scss']
})
export class FilterTableComponent<T> implements OnInit{
@Input() displayColumns?: ColumnDefinition[];
columnNames = new Array<string>();
formGroup: FormGroup;
ngOnInit() {
const groupControls = {};
this.displayColumns.forEach(columnDef => {
const control = new FormControl();
groupControls[columnDef.name] = control;
this.columnNames.push(columnDef.name);
});
this.formGroup = new FormGroup(groupControls);
}
getControl(key: string): AbstractControl {
return this.formGroup.controls[key];
}
getForm() {
return this.formGroup.value;
}
}
<form [formGroup]>
<mat-table [dataSource]="dataSource" class="mat-elevation-z1">
<div *ngFor="let column of displayColumns">
<ng-container [matColumnDef]="column.name">
<mat-header-cell *matHeaderCellDef>
<mat-form-field class="headerInput">
<!-- vvv-if [type]="column.type", getForm() returns a form with strings, if [type]="number", it returns numbers -->
<input matInput [type]="column.type" [placeholder]="column.label"
[formControl]="getControl(column.name)">
</mat-form-field>
</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row[column.name]}} </mat-cell>
</ng-container>
</div>
<mat-header-row *matHeaderRowDef="columnNames"></mat-header-row>
<mat-row *matRowDef="let row; columns: columnNames"></mat-row>
</mat-table>
</form>