Javascript 父组件处的角度无限重渲染

您好，我的Angular7应用程序由一个名为

时间表的父组件和一个名为
行的子组件组成。在本例中，我希望
时间表
为给定月份的每一天生成一个
组件，在本例中为May

现在，
组件只包含一个
元素和一个接受数字的
输入
字段。到目前为止还没什么特别的

时间表组件：

<div *ngFor="let week of splitMonthIntoWeeks(getMonthDays(month))">
  <table>
    <thead>
      <tr>
        <th>
          Hours:
        </th>
      </tr>
    </thead>
    <tbody>
      <tr app-row *ngFor="let day of week"></tr>
    </tbody>
  </table>
</div>

<td><input type="number"></td>

现在，我真的不知道Angular是如何管理更改的，也许我遗漏了一些东西，所以任何提示都将不胜感激。
请参阅此处的解决方案


您不应该直接在模板中调用函数（
splitMonthIntoWeeks
和
getMonthDays
），因为它将在每个渲染周期调用。这意味着对于每个调用，都将生成一个包含新
日期的新数组
ngFor
的工作原理是检查其值是否与上一个周期的对象完全相同（使用
==
）

如果比较不匹配，
ngFor
认为它是一个新对象，因此它会销毁相应的DOM元素并生成一个新的DOM元素。您可以通过
RowComponent
组件构造函数中的
console.log
查看它

当比较两个complexe对象时，比如
Date
，它会检查对象是否真的相同（内存中的指针相同），但在您的情况下，这并不是因为函数一直在重新创建新对象

因此，您可以创建数组并将结果持久化到本地属性中，而不是在每个周期中调用函数，并且仅当
@Input
月份
发生更改时才重新计算此数组。为此，您可以使用
onChanges
生命周期，或者为
@输入使用setter
（如我的示例所示）。
请参见此处的解决方案


您不应该直接在模板中调用函数（
splitMonthIntoWeeks
和
getMonthDays
），因为它将在每个渲染周期调用。这意味着对于每个调用，都将生成一个包含新
日期的新数组
ngFor
的工作原理是检查其值是否与上一个周期的对象完全相同（使用
==
）

如果比较不匹配，
ngFor
认为它是一个新对象，因此它会销毁相应的DOM元素并生成一个新的DOM元素。您可以通过
RowComponent
组件构造函数中的
console.log
查看它

当比较两个complexe对象时，比如
Date
，它会检查对象是否真的相同（内存中的指针相同），但在您的情况下，这并不是因为函数一直在重新创建新对象

因此，您可以创建数组并将结果持久化到本地属性中，而不是在每个周期中调用函数，并且仅当
@Input
月份
发生更改时才重新计算此数组。为此，您可以使用
onChanges
生命周期，或者为您的
@输入使用setter
（如我的示例所示）。
谢谢！！！工作起来很有魅力。Angular有某种反应样式的虚拟dom来检查更新了什么？不是虚拟dom，Angular只检查自上次迭代以来其绑定是否发生了更改。如果是，则相应地重新渲染此元素。我的英语不够好，无法更清楚地解释它：/你可以读一些关于角度变化检测器的文章；）老实说，非常感谢！我不可能在发疯之前就知道了哈哈。谢谢！！！工作起来很有魅力。Angular有某种反应样式的虚拟dom来检查更新了什么？不是虚拟dom，Angular只检查自上次迭代以来其绑定是否发生了更改。如果是，则相应地重新渲染此元素。我的英语不够好，无法更清楚地解释它：/你可以读一些关于角度变化检测器的文章；）老实说，非常感谢！我不可能在发疯之前就发现了，哈哈。
<td><input type="number" [(ngModel)]="hours"></td>