奇怪的 *ngFor 问题

Question

我有一个图书模式，它有一个名称和启用标志。如果启用了这本书，我需要在视图中显示一个购买按钮。

示例代码：

Books.ts

export class Book{
Name:string;
IsEnable:boolean;
}

books.component.ts

...
books = [{"Name":"A", "IsEnable":"True"},{"Name":"B", "IsEnable":"False"}];
....
getEligibleBooks(book){
console.log(book);
return book.IsEnable;
}

books.component.html

<div *ngFor="let book of books">
    <button *ngIf="getEligibleBooks(book)"
    class="link-button" style="display: inline-block"
    (click)="addEvent(true)"><i class="add-circled"></i>
       Buy
    </button>
</div>

问题：我只有两本书，但是当我运行代码时，我在控制台中收到多个日志。上面的代码只是一个示例。真正的代码在 getEligible 方法中有 api 个调用。对于两本书，该方法无休止地调用。我做错了什么？

Answer 1

这是正常的，只要在您的 angular 应用程序中运行更改检测周期以查看这两本书是否更改，您就会收到这些日志，如果是，则更新视图。更改检测周期事件可能发生在许多情况下，其中最常见的是浏览器事件，如单击、滚动、ajax 请求、计时器事件等。这就是为什么我们应该在 [=14] 中编写尽可能少的代码的原因=]吸气剂。

Answer 2

这是因为更改检测循环多次调用您的函数。为什么不使用

<button *ngIf="book.isEnable" ... >

或者您需要在展示您的图书时执行一些额外的操作？

Read more about change detection in angular

奇怪的 *ngFor 问题

Weird *ngFor issue

angular

ngfor