如何在Angular中用JavaScript及Map遍历渲染JSON并拆分日期区间展示

原实现将数组类型的筛选项拼接为单个条目存入allFilters，现在仅需在识别到需要拆分的数组场景时，将一个条目拆分为两个独立对象再push到数组中，现有HTML遍历逻辑无需额外修改。

前置说明 #

拆分前可增加判断条件，避免数组长度不足时报错：

• 仅特定字段（如示例中的日期区间字段）需要拆分：通过字段名判断
• 所有长度为2的数组都需要拆分为区间：直接判断数组长度，无需硬编码字段名

效果1实现（保留原有Second前缀） #

修改TS循环中数组分支的处理逻辑，替换原有的join拼接逻辑：

// 原有循环遍历每个val的逻辑中，替换原三元判断
if (Array.isArray(val.value)) {
  // 拆分判断：根据实际需求调整条件，示例为匹配日期区间字段
  if (val.name === 'dateRange' && val.value.length >= 2) {
    // 第一条：保留原有字段名的dateFrom
    this.allFilters.push({
      name: `${val.name}_from`,
      value: val.value[0].value,
      displayName: val.displayName,
      displayValue: `dateFrom ${val.value[0].value}`
    });
    // 第二条：保留原有字段名的dateTo
    this.allFilters.push({
      name: `${val.name}_to`,
      value: val.value[1].value,
      displayName: val.displayName,
      displayValue: `dateTo: ${val.value[1].value}`
    });
  } else {
    // 其他不需要拆分的数组走原有拼接逻辑
    this.allFilters.push({
      name: val.name,
      value: val.value.map((obj: any) => obj.value).join(" - "),
      displayName: val.displayName,
      displayValue: val.value.map((obj: any) => obj.value).join(" - ")
    });
  }
} else {
  // 非数组逻辑与原有逻辑完全一致
  this.allFilters.push({
    name: val.name,
    value: val.value,
    displayName: val.displayName,
    displayValue: val.displayValue
  });
}

HTML模板无需修改，若需要每条筛选项独占一行，可给渲染元素增加块级样式：

<span *ngFor="let filter of allFilters" style="display: block;">
  {{ filter.displayName }}: {{ filter.displayValue }}
</span>

渲染后输出效果：

First: 2
Second: dateFrom 2021-04-08
Second: dateTo: 2021-04-20
Third: 15

效果2实现（移除原有Second前缀） #

仅需在上述拆分逻辑中，修改两个新增条目的displayName和displayValue赋值：

// 拆分逻辑部分修改为
if (val.name === 'dateRange' && val.value.length >= 2) {
  this.allFilters.push({
    name: `${val.name}_from`,
    value: val.value[0].value,
    displayName: 'dateFrom',
    displayValue: val.value[0].value
  });
  this.allFilters.push({
    name: `${val.name}_to`,
    value: val.value[1].value,
    displayName: 'dateTo:',
    displayValue: val.value[1].value
  });
}

渲染后输出效果：

First: 2
dateFrom: 2021-04-08
dateTo:  2021-04-20
Third: 15

可选优化 #

如果不需要区分字段，所有长度为2的数组都要拆分为区间展示，只需将判断条件从val.name === 'dateRange'改为val.value.length === 2即可，无需硬编码字段名。

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