显示数组时，Angular ngFor 在无限循环中运行

Question

我目前正在尝试为我的网络应用程序制作一个日志框。它获取一个日志数组，并应在 div 中逐行显示它们。我使用 ngFor 并循环遍历我的日志数组，然后显示它们。

我的问题是现在日志显示无限次，而不是应有的 5 次（列表中的 5 个数组条目）。

有人提示我缺少什么吗？

日志.component.html

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

日志服务.ts

export class LogService {
  private logArray = [];
  /* private logObject = {} as Log; */

  constructor(private httpservice: HttpserviceService) { 
    
  }

  public getLogs(): Array<Log> {
    this.httpservice.getLogs().subscribe(data => {
      data.forEach(index => {
        let logObject = {} as Log;
        logObject.when = index.when;
        logObject.type = index.type;
        logObject.data = index.data;
        this.logArray.push(logObject);
      })
    }
    )
    return this.logArray;
  }
}

谢谢 ：）

Answer 1

不要使用 html 模板中的函数调用来显示数据。
相反，getLogs()从 AngularngOnInit()函数调用该函数，并将响应存储在变量中。然后循环该变量：

export class LogService implements OnInit {
// ...

logs = [];

ngOnInit() {
   this.getLogs();
}

getLogs(): Array<Log> {
    this.httpservice.getLogs().subscribe(data => {
      data.forEach(index => {
        let logObject = {} as Log;
        logObject.when = index.when;
        logObject.type = index.type;
        logObject.data = index.data;
        this.logArray.push(logObject);
      });
      // assign the variable here:
      this.logs = data;

    });
}

在模板中：

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

这背后的原因是 Angular 在每个页面渲染周期都会调用 getLogs 函数。但是您应该只在初始化组件时调用一次 http 请求。

不要忘记取消订阅您的 Observable。;) - 根据下面的评论进行更正。