Angular中根据布尔值控制数据显示异常问题求助

1. 修正组件类代码 #

将check明确为boolean类型，初始化users为空数组，并在请求错误时重置check为false：

import { Component, OnInit } from '@angular/core';
import { UserDataService } from '../services/user-data.service';

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.css']
})
export class UsersComponent implements OnInit {
  check: boolean = false;
  pageTitle = 'Users List';
  errorMessage = '';
  users: any[] = [];
  constructor(private userService: UserDataService) { }

  ngOnInit(): void {
    this.userService.users().subscribe({
      next: (users: any) => {
        this.users = users;
        this.check = true;
      },
      error: (err: any) => {
        this.errorMessage = err;
        this.check = false;
      }
    })
  }
}

2. 优化模板逻辑 #

使用*ngIf的else语法统一控制显示逻辑，避免独立*ngIf可能引发的渲染异常：

<p>users works!</p>
<div>*********************User Component*******************</div>
<p>{{check}}</p>

<div *ngIf="check; else noDataTemplate">
  <ul>
    <li *ngFor="let user of users">
      {{user.name}}
    </li>
  </ul>
</div>

<ng-template #noDataTemplate>
  Data not available
</ng-template>

问题原因说明 #

• 原代码中users未初始化，若请求同步完成，可能出现users已有值但check变更未及时触发变更检测的情况；
• 两个独立的*ngIf逻辑不够严谨，使用else语法能更清晰地控制互斥的显示状态；
• 错误回调未重置check，若请求失败，check可能保持true，导致错误状态下仍显示列表。

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