Angular 5中如何在ngModel中使用表达式？附相关组件与HTML代码

从你给出的代码来看，你应该是想在*ngFor循环里，动态绑定ngModel到TenantStructure类里的tenant1、tenant2这类带编号的属性上对吧？直接用模板插值的方式（比如[(ngModel)]="tenantStructure.tenant{{x}}"）是行不通的，Angular不支持这种语法，不过我们有两种靠谱的解决方式：

方式一：动态访问对象属性（适配现有数据结构） #

如果不想修改现有的TenantStructure类结构，可以通过方括号语法+模板字符串来动态构建属性名，从而实现绑定。

假设你的fill管道返回的是包含1、2、3、4的数组（对应4个租户属性），HTML代码可以这么写：

<tr *ngFor="let tenantIndex of tenantsInRoom | fill">
  <td>Name: <input type="text" [(ngModel)]="tenantStructure[`tenant${tenantIndex}`].name"></td>
  <td>Number: <input type="text" [(ngModel)]="tenantStructure[`tenant${tenantIndex}`].number"></td>
</tr>

关键注意点： #

一定要在组件中提前初始化每个tenant属性，避免出现undefined导致的绑定错误：

// 组件类中的初始化逻辑
import { Component, OnInit } from '@angular/core';
import { TenantStructure } from './tenant-structure';
import { SingleTenant } from './single-tenant';

@Component({
  // 组件元数据...
})
export class YourComponent implements OnInit {
  tenantStructure: TenantStructure = new TenantStructure();

  ngOnInit() {
    // 逐个初始化租户对象
    this.tenantStructure.tenant1 = new SingleTenant();
    this.tenantStructure.tenant2 = new SingleTenant();
    this.tenantStructure.tenant3 = new SingleTenant();
    this.tenantStructure.tenant4 = new SingleTenant();
  }
}

方式二：重构数据结构为数组（更推荐） #

其实从Angular的循环特性来看，把分散的tenant1-tenant4改成数组会更合理，代码更简洁易维护，也更符合循环场景的设计：

1. 修改TenantStructure类 #

export class TenantStructure {
  roomNum: number;
  tenants: SingleTenant[] = []; // 用数组替代单个租户属性
  advanceAmount: number;
  rentAmount: number;
  electricityBill: number;
  miscAmount: number;
  empty: string;
}

2. 组件中初始化数组 #

ngOnInit() {
  // 初始化4个空的租户对象
  for (let i = 0; i < 4; i++) {
    this.tenantStructure.tenants.push(new SingleTenant());
  }
}

3. 简化HTML循环 #

<tr *ngFor="let tenant of tenantStructure.tenants">
  <td>Name: <input type="text" [(ngModel)]="tenant.name"></td>
  <td>Number: <input type="text" [(ngModel)]="tenant.number"></td>
</tr>

这种方式不需要处理动态属性名，代码可读性和可维护性都更高，是更推荐的做法。

内容的提问来源于stack exchange，提问作者Ajitesh Newnaha