如何动态定义 ngmodel 名称

Question

这是我的代码：

vmarray[]={'Code','Name','Place','City'}
export class VMDetail {
    lstrData1:string;
    lstrData2:string;
    lstrData3:string;
    lstrData4:string;
    lstrData5:string;
    lstrData6:string;
    lstrData7:string;   
}
vm:VMDetail

<ng-container *ngFor="let datas of vmarray;  let i = index;"> 
    <mat-form-field class="example-full-width" [ngStyle]="ngStyleMapper(datas.width)">    
        <input [(ngModel)]="vm.lstrData{{i}}"   name="vm.lstrData{{i}}"  matInput placeholder ={{datas}}  (click)="dblclick(i)">
    </mat-form-field>        
</ng-container> 

如何动态定义 ngModel 名称？

Answer 1

可以使用

索引器访问对象成员

[(ngModel)]="vm['lstrData'+i]"

Answer 2

您正在寻找数组数据结构。

一个简单的方法是为值创建另一个数组，并根据数组索引将每个字段与其值链接起来。

@Component({
    template: `
        <pre>{{ values | json }}</pre>
        <ng-container *ngFor="let field of fields; let i = index;">
            <input [name]="'field_' + i" [(ngModel)]="values[i]" />
        </ng-container>
    `,
})
class MyComponent {
    fields = ['Code', 'Name', 'Place', 'City'];
    values: string[] = [];
}

优势

• 更具可读性和易于维护(添加更多字段就像在字段数组中添加字段一样简单(
• 无需引入其他数据类型(在您的情况下为 VMDetail(