Question

在Angular应用程序中，我创建了一个显示一些数据的控件。我有一个“ className”类，它的一个字段（ShowDetails）被声明为布尔值，因此，如果用户单击按钮，我将设置ShowDetails = true并显示一个包含信息的div。

@Input() className: ClassName;
...
ShowDetails($event){
  this.className.ShowDetails = true;
}
...
<app-details-info *ngIf="className.ShowDetails" (closed)="ClosedDetails($event)" [info]="className">

</app-details-info>

不幸的是，它不起作用（并且在控制台上没有显示任何错误），但是如果我更改了

* ngIf =“ className.ShowDetails ”

使用局部布尔变量可以很好地工作。

我在哪里错了？

Answer 1

尝试使用?运算符：

<app-details-info *ngIf="className?.ShowDetails">

</app-details-info>

?是模板中的安全导航操作符。此表达式className?.ShowDetails等效于className != null ? className.ShowDetails : null

Answer 2

通过使用?.安全导航运算符，@ StepUp的答案完全正确，但另一种方法是像这样设置class Name属性的默认值

@Input() className: ClassName = new CalssName();

在这种情况下，如果未在类中设置ShowDetails，则该值将为undefined，并且if表达式的计算结果为伪造

Answer 3

经过长时间的调试和许多测试，我发现：

从REST服务返回的Json是：

{
  ...
  showDetails: false,
  ...
}

使用小写字母，但是在我的代码中，我声明了

的类

ShowDetails : boolean;

带有大写字母S 。

Angular（Typescript）不会给我任何错误，并创建了一个不是MY类的新类的实例，但是具有几乎相同的属性（这解释了为什么其他所有东西都起作用的原因）

为什么ngIf不适用于class属性

3 个答案: