在Angular 10中使用*ngFor迭代对象键

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  settings = {
    theme: 'dark',
    notifications: true,
    language: 'en'
  };
}

<!-- app.component.html -->
<ul>
  <li *ngFor="let key of objectKeys(settings)">
    {{ key }}: {{ settings[key] }}
  </li>
</ul>

// app.component.ts
export class AppComponent {
  settings = {
    theme: 'dark',
    notifications: true,
    language: 'en'
  };

  objectKeys(obj): any[] {
    return Object.keys(obj);
  }
}

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

@Component({
  // ...
})
export class AppComponent {
  settings = {};

  constructor(private cdr: ChangeDetectorRef) {}

  updateSettings() {
    // 异步更新settings对象
    this.settings = { /* 新的对象 */ };
    this.cdr.detectChanges(); // 手动触发变更检测
  }
}