我目前正在嘗試為我的 webapp 制作一個 Logbox。它獲取一個日志陣列，并應在 div 中逐行顯示它們。我使用 ngFor 并回圈遍歷我的日志陣列，然后顯示它們。
我現在的問題是日志顯示無限次，而不僅僅是 5 次（串列中的 5 個陣列條目）。
有人暗示我錯過了什么嗎？
logs.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;
}
}
謝謝 ：）
uj5u.com熱心網友回復：
不要使用來自 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。;) - 從下面的評論中更正。
uj5u.com熱心網友回復：
您還可以使用反應式方法并執行以下操作：
在組件中定義一次可觀察物件：
logs$ = this.httpservice
.getLogs()
.pipe(
shareReplay(),
map((data) => data.map(({ when, type, data }) => ({ when, type, data })))
);
在您的組件 HTML 中包含以下內容：
<div class="col-12" *ngFor="let log of logs$ | async">
<app-singlelog [when]="log.when" [type]="log.type" [data]="log.data"></app-singlelog>
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/530761.html
上一篇：CSS網格：沒有網格行間隙的外觀取決于相鄰單元格的內容
下一篇：flexbox換行而不是連續列印