Question

我正在动态创建一个表，该表能够根据列标题中的输入进行过滤。我遇到一个问题，无论输入的类型是如果输入类型是通过变量设置的，都将从输入返回的数据类型强制转换为字符串。因此，在模板中，如果要遍历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>

如果输入类型是通过变量

0 个答案: