无法绑定,因为它不是角度组件的已知属性
Posted
技术标签:
【中文标题】无法绑定,因为它不是角度组件的已知属性【英文标题】:Can't bind since it isn't a known property of angular component 【发布时间】:2019-04-12 14:37:14 【问题描述】:我正在尝试根据布尔变量有条件地设置类名。我已经在父组件中设置了变量:
public alteredSidebar: boolean;
这是我在有条件地定义它是哪个类背后的过程:
<div [class]="alteredSidebar == false ? 'secondsidenav' : 'sidenav'" id="rollup-sidenav" [ngClass]=" 'greyout': greyOut "></div>
我已经用 css 文件定义了 2 个类,一个叫做 secondsidenav,另一个叫做 sidenav。无论我在哪里将布尔值设置为 false,我都希望类名等于 secondsidenav,并且在它不为 false 的地方是 sidenav。这是我使用它的一个实例,我希望该类设置为“secondsidenav”:
<app-rollup [data]="rollupData" (resetCalled)="onRollupReset()" (entrySelected)="onRollupSelectEvent($event)" [alteredSidebar]="false">
</app-rollup>
但是我收到以下错误:“无法绑定到 'alteredSidebar',因为它不是 'app-rollup' 的已知属性。”
【问题讨论】:
【参考方案1】:在上面使用@Input()
装饰器
@Input()
public alteredSidebar: boolean;
【讨论】:
你能提供更多关于你的问题的代码吗?【参考方案2】:正如@junk 所说,您应该在 app-rollup 组件中使用 @Input() 装饰器,我想补充一点,不要将 [className] 与 ngClass 混合,这可能与您的问题无关,但它如果您使用响应式属性以编程方式添加或删除一个类,那么会变得非常有问题,只需选择一个并尽量不要混合它们,这也会使代码更加一致。哦,正确的语法是 [className] 你可能把它与 [class.foo]="expresion" 混淆了,如果表达式为真,它将应用 'foo' 类
我个人会做这样的事情,也坚持一种方法是considered a best practice
<div id="rollup-sidenav" [ngClass]="
'greyout': greyOut,
'secondsidenav': !alteredSidebar,
'sidenav': alteredSidebar
">
</div>
希望有帮助,如果没有,请告诉我!
【讨论】:
【参考方案3】:@Berheet.. 试试这个
在组件本身中分配值alteredSidebar
并像下面这样传递它
parentComponent.ts
public alteredSidebar: boolean = false;
parentComponent.html
<app-rollup [data]="rollupData" (resetCalled)="onRollupReset()" (entrySelected)="onRollupSelectEvent($event)" [alteredSidebar]="alteredSidebar">
</app-rollup>
在子组件中添加输入
childComponent.ts
@Input() alteredSidebar: boolean;
childComponent.html
<div [class]="alteredSidebar == false ? 'secondsidenav' : 'sidenav'" id="rollup-sidenav" [ngClass]=" 'greyout': greyOut "></div>
【讨论】:
【参考方案4】:我建议简单地设置 div-tags 类属性,如下所示
[class]="alteredSidebar ? 'sidenav' : 'secondsidenav'"
这样你得到一个更易读的条件?正面案例:负面案例流程,您无需将变量与任何内容进行比较。
【讨论】:
以上是关于无法绑定,因为它不是角度组件的已知属性的主要内容,如果未能解决你的问题,请参考以下文章
无法绑定到“配置”,因为它不是角度 8 中“maphilight”错误的已知属性
角度4:无法绑定到'ngForFor',因为它不是'li'的已知属性
无法绑定到“matMenuTriggerFor”,因为它不是“按钮”的已知属性
无法绑定到“formGroup”,因为它不是登录组件中“form”的已知属性
“无法绑定到 'ngModel',因为它不是 'p-calendar' 的已知属性”尝试使用 PrimeNG 组件的错误消息,为啥?