Angular Clarity Icon 无法绑定到 ngFor 循环中的 CSS 形状属性答案

【问题标题】：Angular Clarity Icon cannot bind to CSS shape attribute within an ngFor loopAngular Clarity Icon 无法绑定到 ngFor 循环中的 CSS 形状属性
【发布时间】：2018-12-29 00:24:46
【问题描述】：

我正在尝试建立一个链接列表，其中的链接是从休息调用中提供的。生成的链接列表将包含一个 URL 和一个类型标识符。我正在尝试使用 ngFor 循环显示图标，并且正在使用库存的 Clarity 图标集：

<ng-template ngFor let-link [ngForOf]="links" let-j="index" >
    <clr-icon shape={{link.icon}} height="42" width="42"></clr-icon>
    ...

但是当我运行它时，我得到：

ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'shape' since it isn't a known property of 'clr-icon'.
1. If 'clr-icon' is an Angular component and it has 'shape' input, then verify that it is part of this module.
2. If 'clr-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

在这种情况下，有没有办法将形状绑定到图标，或者 CSS 属性是不行的？

【问题讨论】：

惯用的*ngFor="let link of links" 有什么问题？该消息告诉您没有以clr-iconas seclector 的已知组件。你可能忘记在你自己的 NgModule 中导入声明这个组件的模块。此外，传递输入的正确方法是[shape]="link.icon"。
clr-icon 在这种情况下只是一个 css 标记，它只需要在根处链接的 css 就可以在没有形状绑定的情况下正常工作，RE ng-template，我需要索引。
那么惯用语法是*ngFor="let link of links; index as j"。 clr-icon 是一个非标准的 HTML 标签。所以要么它应该是一个 Angular 组件，要么它应该是一个 Web 组件。如果不应该是其中任何一个，则使用标准标签，如 span 或 div。但是 span 或 div 没有任何 shape 属性，这意味着它很可能是 angular 组件或 web 组件。所以你需要导入它的NgModule，或者按照错误信息说的去做。
阅读vmware.github.io/clarity/icons/clarity-icons 确认它是一个Web 组件。按照错误消息中的说明进行操作。
有一堵红色的墙，所以我实际上并没有完全理解错误，我认为根本无法绑定到 CSS 元素。但是您的建议有效，需要添加架构。

标签： angular vmware-clarity

【解决方案1】：

你必须使用属性绑定来做到这一点。

<clr-icon [attr.shape]="link.icon" height="42" width="42"></clr-icon>

【讨论】：

【解决方案2】：

我相信你可能没有将 ClarityModule 包含到你的 NgModule 中，它会处理向你的模块注册 clr-icon 元素。如果您使用功能模块，对于任何使用 Clarity 的功能模块，您仍然必须将 ClarityModule 添加到您的导入中，否则您会收到类似的错误。

【讨论】：

【解决方案3】：

感谢JB为我指明了正确的方向，这是一个需要添加的简单案例：

schemas: [
  CUSTOM_ELEMENTS_SCHEMA
]

到父 NgModule。

【讨论】：