在 angular 中的单元测试期间，使用插值法为 html 标记赋值会抛出错误

Question

我正在尝试运行在 angular 中进行单元测试。但我收到以下错误消息。它在编译过程中没有抛出，我的应用程序按预期工作正常，但只有在执行单元测试时才会抛出此错误。

Error message: Template parse error,Cant bind to ngxrow since it is not a known property of div. <div [ERROR ->]ngxcol="{{newwidth}}">

我不确定错误是否是由于使用插值{{}}赋值造成的。无论如何我可以解决这个问题。试图找到过去 2 天的解决方案以下是我的部分代码：

component.html

<div ngxlayout="grid>
 <div ngxrow>
  <div ngxcol={{newwidth}}>
   html core logic implemented
  </div>
 </div>
</div>

component.ts

export class AppComponent {
newwidth:any="30"
constructor(){}
}

如果我直接在 ngxcol 属性中直接将宽度指定为 30，我不会收到错误，但只有在使用插值指定值 30 时才会出现问题。

Answer 1

好吧，当开发人员忘记导入库模块（错误消息：无法绑定到 ngxrow，因为它不是 [=20= 的已知属性时，就会发生这种情况 (sometimes/usually) ] - 这意味着“angular 不知道 'normal' HTMLDivElement 的 'ngxrow' 属性，（所以这意味着，你可能使用了一些库（它导出那些指令 'ngxrow' 。 ..)) 他希望使用 (module, containing directives: ngxlayout, 'ngxrow' ...) ... 当测试被引导时（testBed 创建用于测试的模块）-> 你需要导入模块也是 .. 举个例子：https://github.com/ngx-dummy/accordion-simple/blob/master/projects/%40ngx-dummy/accordion-simple/src/lib/accordion-item.component.spec.ts#L33 )

在 angular 中的单元测试期间，使用插值法为 html 标记赋值会抛出错误

Assigning html tag a value using interpolation throws error during unit testing in angular

html

karma-jasmine

jestjs

angular

component.html

component.ts