如何将JSON对象键值对分别绑定到angular模板

export class MyComponent {
  myData = {
    name: 'John Doe',
    age: 30,
    email: 'john.doe@example.com'
  };
}

<!-- 使用插值表达式显示单个属性 -->
<p>Name: {{ myData.name }}</p>
<p>Age: {{ myData.age }}</p>
<p>Email: {{ myData.email }}</p>

<!-- 使用*ngFor迭代对象的键值对 -->
<div *ngFor="let item of myData | keyvalue">
  <strong>{{ item.key }}:</strong> {{ item.value }}
</div>

import { ChangeDetectorRef } from '@angular/core';

export class MyComponent {
  constructor(private cdr: ChangeDetectorRef) {}

  updateData() {
    this.myData.name = 'Jane Doe';
    this.cdr.detectChanges(); // 手动触发变更检测
  }
}

export class MyComponent {
  myData = {
    // ...复杂对象
  };

  trackByFn(index: number, item: any) {
    return item.key; // 或者使用唯一标识符
  }
}

<div *ngFor="let item of myData | keyvalue; trackBy: trackByFn">
  <!-- 内容 -->
</div>