如何动态定义ngmodel名称？

Posted 2021-04-03

这是我的代码：

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名称？

答案

您可以使用索引器访问对象成员

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

另一答案

您正在寻找阵列数据结构。

一种简单的方法是为值创建另一个数组，并根据数组索引将每个字段与其值相关联。

@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）