无法绑定,因为它不是角度组件的已知属性

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 组件的错误消息,为啥?

Angular2 RC5:无法绑定到“属性 X”,因为它不是“子组件”的已知属性