如何在HTML中使用TypeScript遍历JSON数组？

看起来你是在Angular项目中处理参会者数据对吧？下面一步步教你怎么在HTML模板里遍历这个TypeScript数组：

首先，先确保你的组件里正确定义了Attendee接口，并且把localStorage中的字符串数据解析成数组赋值给attendees变量：

// 先定义Attendee接口，匹配你的JSON结构
interface Attendee {
  auction_number: string;
  email: string;
  first_name: string;
  last_name: string;
  table: number;
  id: string;
}

// 你的组件类代码
export class YourComponent {
  attendees: Attendee[] = [];

  constructor(public authService: AuthService) {
    // 从localStorage读取并解析数据（假设存储的键是'attendees'）
    const storedAttendees = localStorage.getItem('attendees');
    if (storedAttendees) {
      // 类型断言确保解析后的数据符合Attendee类型
      this.attendees = JSON.parse(storedAttendees) as Attendee[];
    }
  }
}

接下来，在对应的HTML模板里，使用Angular的*ngFor指令就能轻松遍历这个数组，把每个参会者的信息渲染出来：

<!-- 基础遍历渲染示例 -->
<div class="attendee-card" *ngFor="let attendee of attendees; let i = index">
  <h4>参会者 {{ i + 1 }}</h4>
  <p><strong>姓名:</strong> {{ attendee.first_name }} {{ attendee.last_name }}</p>
  <p><strong>邮箱:</strong> {{ attendee.email }}</p>
  <p><strong>拍卖编号:</strong> {{ attendee.auction_number }}</p>
  <p><strong>桌号:</strong> {{ attendee.table === 0 ? '暂未分配' : attendee.table }}</p>
  <hr>
</div>

额外优化小技巧 #

• let i = index是可选的，用来获取当前项的索引（从0开始），可以用来生成序号或者做一些索引相关的操作。
• 如果数组可能为空，建议添加一个空状态提示，提升用户体验：

<!-- 处理空数据场景 -->
<div *ngIf="attendees.length === 0" class="empty-state">
  暂无参会者数据
</div>
<div class="attendee-card" *ngFor="let attendee of attendees; let i = index">
  <!-- 渲染内容同上 -->
</div>

或者用ng-container来避免生成额外的DOM元素：

<ng-container *ngIf="attendees.length; else emptyState">
  <div class="attendee-card" *ngFor="let attendee of attendees; let i = index">
    <!-- 渲染内容 -->
  </div>
</ng-container>
<ng-template #emptyState>
  <div class="empty-state">暂无参会者数据</div>
</ng-template>

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