错误：多个组件匹配带有标记名 app-contact 的节点

Question

我有一个 Angular Material 应用程序，其中有一个卡片列表，每个卡片代表一个Contact. 即具有各种属性的对象，例如名字、姓氏、电子邮件、图像等。

要显示此列表，我只需遍历Contacts列表：

<mat-list role="list" class="contacts-container-box">
  <div class="application-box" role="listitem" *ngFor="let contact of contacts">
    <app-contact [contact]="contact"></app-contact>
  </div>
</mat-list>

app-contact然后该组件负责显示每个Contact. 但是，如果我尝试按原样运行应用程序，则在编译时不会出错，但在浏览器控制台中，我得到以下信息：

我试图在 StackBlitz 上重现这个问题，我得到了这个：

无论如何，它不会按预期工作。请注意，这个错误只有当我取消注释方法时发生getContactImage()的ContactsService，如果我评论的一切作品除，当然，对于未加载的图像。

Stackblitz 演示：https ://stackblitz.com/edit/angular-ivy-tnb6rv

Answer 1

这发生在我身上，因为我在@Input 的变量的构造函数中有一个 console.log()。

可能这个问题已经解决了，但这里是其他人的信息