Question

我有一个mat-list和mat-list-item工作，需要根据不同布尔类型的值进行隐藏和显示。在我的数据收集中，我添加了一个字段以指定* ngIf的布尔值名称。渲染UI时，F12向我显示以下错误

未捕获的错误：模板解析错误：

TypeError: Cannot read property 'toUpperCase' of undefined ("                   

                                    <div [ERROR ->]*ngIf={{metricTotal.clause}}>
                                    <div class="ng-container" *ngIf={{"): ng:///AppModule/SalesComponent.html@226:41
Can't bind to '*ngIf' since it isn't a known property of 'div'. ("

我不能直接将ngIf用作每个实际boolean的名称。

Answer 1

您不应将插值 {{}} 与* ngIf一起使用，请删除花括号，

 <div *ngIf=metricTotal.clause>

Answer 2

请勿将{{}}用于*ngIf条件。应该是这样的：

<div *ngIf="condition">Content to render when condition is true.</div>

您可以直接使用它：

<div *ngIf="metricTotal.clause">

如果它在*ngFor中，则尝试在组件中使用函数以返回值：

例如：

<div *ngIf="isDisplayed(metricTotal.clause)">

在组件中，您可以基于clause构建逻辑以返回true或false：

isDisplayed(clauseValue): boolean {
// your logic to decide the display condition

return true; // or false as needed

}

Answer 3

不确定这是否是最好的方法，但是我删除了使我失望的内插法。

'~(?:^|\b) (?<![\'"]) (\w+) (?![\'"]) :~mx'

以我的ts代码

In the angular, I changed to *ngIf="getDataTypeName(item)"

使用* ngIf = {{object.field}}导致无法读取未定义的属性“ toUpperCase”

3 个答案: