动态集名称属性中输入字段

Question

我想动态设置名称属性

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>

表.component.ts

  filterData(e){
    console.log(e.target.name) <--- name is a blank string 
    console.log(e)
    this.fields = e.target.value
  }

Answer 1

Angular2 绑定中的 “name” 属性

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

这些都是:

> < Li > < p > < code > name = " col . header "

[name]=“'col.header'”

< code > name = " { { ' col . header ' } } "

Answer 2

我建议使用“formControlName”：

Component.html文件:

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

组件。ts文件:

  form: FormGroup;
  payLoad = '';

  onSubmit() {
    this.payLoad = JSON.stringify(this.form.value);
  }

Answer 3

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

[attr.name]="col.header"