Angular中使用ngFor遍历数组时出现无限循环问题求助

核心问题根源 #

你的代码存在两个关键问题，共同导致了日志无限重复显示：

1. 模板中直接调用getLogs()方法，Angular变更检测会频繁触发该方法，每次调用都会发起HTTP请求并往数组追加数据；
2. 服务中的logArray是全局变量，每次调用getLogs()都会重复累加新数据，数组长度持续增长。

具体排查与修复步骤 #

• 禁止在模板中直接调用返回数组的方法
  Angular的变更检测机制会在多种场景下（如HTTP响应、用户操作、定时器触发）重新执行模板表达式，每次都会调用this.logService.getLogs()。这不仅会重复发起HTTP请求，还会不断往logArray里追加数据，导致ngFor渲染的条目越来越多。
  修复方式：在组件的ngOnInit钩子中调用服务方法，将结果存入组件本地变量，模板遍历本地变量即可。

• 清理服务中的重复数据累加
  当前getLogs()每次调用都会订阅HTTP请求，并把返回数据push到同一个logArray，没有清空原有数据。即使修复了模板调用问题，多次调用该方法仍会导致数组重复累加。
  修复方式：要么在发起请求前清空logArray（this.logArray = []），要么直接将响应数据赋值给logArray而非push；更优的做法是让服务返回Observable，由组件处理数据存储。

• 优化服务的数据返回方式
  原服务设计中，HTTP请求是异步的，但getLogs()同步返回数组，第一次返回的是空数组，等响应回来后才填充数据，结合变更检测的频繁调用，会导致多次订阅和数据重复。建议让服务直接返回Observable，组件订阅后获取数据。

修改后的示例代码 #

组件代码（logs.component.ts）

import { Component, OnInit } from '@angular/core';
import { LogService } from './log.service';
import { Log } from './log.model';

@Component({
  selector: 'app-logs',
  templateUrl: './logs.component.html'
})
export class LogsComponent implements OnInit {
  logs: Log[] = [];

  constructor(private logService: LogService) {}

  ngOnInit(): void {
    this.logService.getLogs().subscribe(data => {
      this.logs = data;
    });
  }
}

模板代码（logs.component.html）

<div class="logContent">
    <div class="row">
      <div class="col-12" *ngFor="let log of logs">
        <app-singlelog [when]="log.when" [type]="log.type" [data]="log.data"></app-singlelog>
      </div>
    </div>
  </div>

服务代码（log.service.ts）

import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

export class LogService {
  constructor(private httpservice: HttpserviceService) {}

  public getLogs(): Observable<Log[]> {
    return this.httpservice.getLogs().pipe(
      map(data => {
        // 转换响应数据为Log类型数组
        return data.map(item => ({
          when: item.when,
          type: item.type,
          data: item.data
        } as Log));
      })
    );
  }
}

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