Angular2中如何获取数据区块并避免空区块显示

我帮你排查了下代码，问题出在表单数组的初始化逻辑上：你一开始先给itemRows添加了一个空的表单组，之后遍历Emergencies数据时又追加了对应数量的表单组，这就导致页面上会多出来那个初始的空区块。

要实现“有数据只显示数据区块，无数据才显示空区块”的效果，咱们可以调整表单数组的初始化逻辑：

修正后的TS代码 #

// 假设这是你的组件类里的代码部分
this.Emergencies = [
  { "ContactName": "Person1", "Phone": "12345678", "Relationship": "1" },
  { "ContactName": "Person2", "Phone": "37438367", "Relationship": "4" }
];

// 初始化表单数组，先不添加空组
this.emergencyContactForm = this._fb.group({
  itemRows: this._fb.array([])
});

const itemRows = this.emergencyContactForm.get('itemRows') as FormArray;

// 如果有紧急联系人数据，遍历生成对应表单组并赋值
if (this.Emergencies.length > 0) {
  this.Emergencies.forEach(emergency => {
    const emergencyGroup = this.createEmergency();
    emergencyGroup.patchValue({
      ContactName: emergency.ContactName,
      Phone: emergency.Phone,
      Relationship: emergency.Relationship
    });
    itemRows.push(emergencyGroup);
  });
} else {
  // 没有数据时，添加一个空的表单组
  itemRows.push(this.createEmergency());
}

console.log(itemRows.controls);

关键调整点 #

• 初始化itemRows时改为空数组，不再默认添加空表单组
• 先判断Emergencies是否有数据：
  • 有数据：遍历每条数据，先创建表单组，直接用patchValue赋值后再添加到数组里，避免额外空组
  • 无数据：才添加一个空表单组用于展示空区块
• 用as FormArray做类型断言，代替<FormArray>的写法，更符合TS的规范

这样调整后，页面就只会在没有数据时显示空区块，有数据时只渲染对应的数据表单组啦。

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