Angular TypeError:无法读取null的属性'users‘

// 在组件类中
export class MyComponent {
  users: any;

  constructor() {
    this.fetchUsers();
  }

  fetchUsers() {
    // 模拟异步获取数据
    setTimeout(() => {
      this.users = { users: ['Alice', 'Bob'] };
    }, 1000);
  }
}

<!-- 在模板中 -->
<div *ngIf="users">
  <ul>
    <li *ngFor="let user of users?.users">{{ user }}</li>
  </ul>
</div>

<div *ngIf="users">
  <ul>
    <li *ngFor="let user of users.users">{{ user }}</li>
  </ul>
</div>

export class MyComponent {
  users = { users: [] }; // 初始化为空数组

  constructor() {
    this.fetchUsers();
  }

  fetchUsers() {
    // 模拟异步获取数据
    setTimeout(() => {
      this.users = { users: ['Alice', 'Bob'] };
    }, 1000);
  }
}

const users = this.users?.users;

// my-component.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {
  users: any = { users: [] };

  constructor() {}

  ngOnInit(): void {
    this.fetchUsers();
  }

  fetchUsers() {
    // 模拟异步获取数据
    setTimeout(() => {
      this.users = { users: ['Alice', 'Bob'] };
    }, 1000);
  }
}

<!-- my-component.component.html -->
<div *ngIf="users">
  <ul>
    <li *ngFor="let user of users.users">{{ user }}</li>
  </ul>
</div>