很奇怪* 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

这是正常的，只要在角度应用程序中运行更改检测周期，您就会获得这些日志，以查看这两本书是否已更改，如果是，则更新视图。更改检测周期事件可能发生在最常见的浏览器事件，例如，点击，滚动，ajax请求，计时器事件等。这就是我们应该在属性getter中尽可能少编写代码的原因。

Answer 2

它发生，因为更改检测循环多次调用您的函数。为什么不用

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

或者，当您的图书被显示时，您需要做一些额外的操作吗？

Read more about change detection in angular