Angular 的 Kendo UI：无法绑定到“主要”，因为它不是“按钮”的已知属性答案

【问题标题】：Kendo UI for Angular: Can't bind to 'primary' since it isn't a known property of 'button'Angular 的 Kendo UI：无法绑定到“主要”，因为它不是“按钮”的已知属性
【发布时间】：2017-05-27 18:28:51
【问题描述】：

我收到此错误消息：

无法绑定到“主要”，因为它不是“按钮”的已知属性。

我正在使用yo aspnetcore-spa 角度发生器。 BrowserAnimationsModule 和 ButtonsModule 在我的 app.module 中导入并在导入中注册。我所有的 angular 和 kendo 包都是最新版本。

此外，当我从<button> 中删除[primary]="true" 时，错误消失了。之后，我再次添加[primary]="true" 并且（不刷新页面，HMR 重建）它工作正常。同样，如果我刷新页面，错误会再次出现。

有什么办法吗？

提前致谢。

【问题讨论】：

标签： angular kendo-ui-angular2

【解决方案1】：

Primary 不需要括号，尽管他们的例子说它确实如此。试试：

<button kendoButton primary="true">Primary</button>

【讨论】：

【解决方案2】：

这是我的测试结果

A) [primary]="true"

<button kendoButton (click)="onButtonClick()" [primary]="true">My Kendo UI Angular Button</button>

包含 css 类 k-primary 且不包含主要属性

<button _ngcontent-ogg-c2="" kendobutton="" ng-reflect-primary="true" class="k-button k-primary" dir="ltr">My Kendo UI Angular Button</button>

B) 主=“真”

<button kendoButton (click)="onButtonClick()" primary="true">My Kendo UI Angular Button</button>

包括css类k-primary和primary属性

<button _ngcontent-jow-c2="" kendobutton="" primary="true" ng-reflect-primary="true" class="k-button k-primary" dir="ltr">My Kendo UI Angular Button</button>

C) [主要]="假"

<button kendoButton (click)="onButtonClick()" [primary]="false">My Kendo UI Angular Button</button>

不包含css类k-primary，也不包含primary属性

<button _ngcontent-oto-c2="" kendobutton="" ng-reflect-primary="false" class="k-button" dir="ltr">My Kendo UI Angular Button</button>

D) 主要=假

<button kendoButton (click)="onButtonClick()" primary="false">My Kendo UI Angular Button</button>

包括css类k-primary和primary属性

<button _ngcontent-ktx-c2="" kendobutton="" primary="false" ng-reflect-primary="false" class="k-button k-primary" dir="ltr">My Kendo UI Angular Button</button>

结论

括号中的主要是正确的语法。这意味着属性绑定，即允许您设置视图元素的属性的单向机制 (reference)。删除括号对某些人有效的原因是调制解调器 Web 浏览器会忽略它无法识别的属性。 (reference)
错误Can't bind to 'primary' since it isn't a known property of 'button'是由未正确导入Kendo UI模块引起的。 (reference)

【讨论】：

【解决方案3】：

您的按钮应如下所示：

<button kendoButton [primary]="true">Primary</button>

不要忘记'kendoButton'。

【讨论】：

我已经包含了 kendoButton。同样的错误。也许是 webpack 相关的？
我唯一想到的是你可能没有在 app.module.ts 中注册 ButtonsModule 或者没有安装包。
更新：这是服务器端渲染问题。

【解决方案4】：

确保在模块中导入 ButtonsModule

import { ButtonsModule } from '@progress/kendo-angular-buttons';

@NgModule({
  declarations: [ButtonComponent],
  imports: [ButtonsModule],
  exports: [ButtonComponent]
})

【讨论】：

这对我来说是个错误。我需要将它添加到 app.module 的导入中。