Angular中如何获取对象内measurementTable的measurementPointName并展示

步骤1：确认组件数据结构与赋值 #

先确保你在组件中已经正确获取并存储了目标对象，根据你提供的结构推测，示例代码如下：

// 组件.ts文件
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit {
  // 存储目标数据的变量，建议用接口约束类型（可选，更规范）
  targetData: any;

  ngOnInit(): void {
    // 替换为你实际的接口请求逻辑
    this.targetData = {
      // 其他属性...
      measurementTable: [
        { measurementPointName: "温度测点", /* 其他关联字段 */ },
        { measurementPointName: "压力测点", /* 其他关联字段 */ }
      ]
    };
  }
}

步骤2：模板中正确遍历展示 #

在组件HTML模板里，直接遍历targetData下的measurementTable数组，用可选链?.避免数据未加载时的报错：

<!-- 组件.html文件 -->
<div class="measurement-points">
  <h3>测点列表</h3>
  <div *ngFor="let point of targetData?.measurementTable">
    <p>{{ point.measurementPointName }}</p>
  </div>
</div>

常见问题排查 #

• 核对变量名：你之前用的measurementTableList可能和实际数据中的属性名不匹配，要确保遍历的是对象中真实存在的数组字段（比如measurementTable）。
• 检查数据加载状态：在组件的ngOnInit或请求回调中用console.log(this.targetData)确认数据是否正确赋值，避免异步请求未完成导致数组为空。
• 验证数组类型：确保measurementTable是数组结构，如果是对象类型，需要先用Object.values()等方法转换为数组再遍历。

内容的提问来源于stack exchange，提问作者Eren Akgöz