Javascript 动态地将“名称”属性设置为角度中的输入字段

我试图动态地将name属性设置为*ngFor中数据表中的输入字段。但是，当我转到console.log时，我看到字段中的filter方法中的keyup事件，没有为每个输入设置名称。如何动态添加这些名称

table.component.html

<table>
    <thead>
        <tr>
            <th *ngFor="let col of cols" 
            (click)="selectColHeader(col.prop); 
            col.enableSort && sort(col.prop)"
            role="button">
                <label>{{col.header}}</label>
                <input type="text"
                aria-label="search text field"
                name="{{col.header}}" <-- not being set
                ngModel
                placeholder="search..."
                (click)="$event.stopPropagation()"
                (keyup)="filterData($event)"
                *ngIf=col.enableFilter/>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let row of data |
        filter: fields:selectedInput |
        paginate: { itemsPerPage: 6, currentPage: page, id: id }">
            <td *ngFor="let col of cols">
                {{row[col.prop]}}
            </td>
        </tr>
    </tbody>
</table>

{{col.header}}
我建议使用“formControlName”：

Component.html文件：

<input [formControlName]="q.sFieldName" [id]="q.sFieldName" class="form-control m-input">

我建议使用“formControlName”：

Component.html文件：

<input [formControlName]="q.sFieldName" [id]="q.sFieldName" class="form-control m-input">


基本上
name=“{{col.header}}”
的语法不正确

这些是：

name=“col.header”

[name]=“列标题”

name=“{{'col.header'}}”


基本上
name=“{{col.header}}”
的语法不正确

这些是：

name=“col.header”

[name]=“列标题”

name=“{{'col.header'}}”

您可以将attr前缀与如下属性一起使用

[attr.name]="col.header"

您可以将attr前缀与如下属性一起使用

[attr.name]="col.header"

你的代码没有问题。我复制了它，它为我工作。这表明问题在于col.header。也许它没有价值。尝试将click事件更改为传入col对象和控制台日志，以检查标头是否有值。您的代码工作正常：代码没有问题。我复制了它，它为我工作。这表明问题在于col.header。也许它没有价值。尝试更改click事件以传入col对象和控制台日志，以检查标头是否有值。您的代码工作正常：如果要设置name attributeuse[attr.name]=“col.header”，这三个都无效。如果要设置name attributeuse[attr.name]=“col.header”