Expression ___ has changed after it was checked: how to fix the error in Angular?

Hello everyone! I'm a beginner in Angular and TypeScript, and I've encountered a very strange error that appears in the browser console: "Expression has changed after it was checked". \n\nI have a simple component that displays a list of tasks. Here's the simplified code:\n\n```typescript\nimport { Component, OnInit } from '@angular/core';\n\ninterface Task {\n id: number;\n title: string;\n completed: boolean;\n}\n\n@Component({\n selector: 'app-task-list',\n template: `\n \n

Total tasks: {{ tasks.length }}

\n `\n})\nexport class TaskListComponent implements OnInit {\n tasks: Task[] = [\n {