角色应用程序中的MVVM

Question

在我职业生涯的前几个月，我正在学习和编写Angular应用程序，并且通常通过调用函数来绑定组件中的属性。

例如（简单示例）：

<div *ngFor="let animal of animals">
    <img [src]="animal.getAnimalSrc()">
    <button [disable]="animal.disableAnimal()">
</div>

有人告诉我，在我的模板中调用这样的函数并不是一个好主意，因为Angular的lifecycle-hooks和docheck。

所以我开始采用更多的MVVM方法，并在我的组件代码中执行类似的操作：

private toAnimalViewModel(value: any): object {
    return {
        animalSrc: this.getAnimalSrc();
        disableAnimal: this.disableAnimal();
    };
}

然后在我的模板中：

<div *ngFor="let animal of animals">
    <img [src]="animal.animalSrc">
    <button [disable]="animal.disableAnimal">
</div>

我想知道为什么这被认为是更好的做法（是吗？）以及以这种方式编写代码的优点/缺点是什么。

由于