Question

简单的问题，似乎找不到答案... （这将是某人的快速“要点”）

我希望在Angular 5 ngIf中有一个条件，“小于”某些变量。

<div class="row" *ngIf="Subject < 4" >
<div class="row" *ngIf="Subject <= 4" >

此语法炸弹是因为“ <”-我该怎么做？（无需编写功能）？

Answer 1

* ngIf不适用于'<='符号。需要使用OR运算符分别检查是否等于（==），小于（<）和大于（>）条件。

<div class="row" *ngIf="Subject<4 || Subject==4" >
  Row 1 (Rendered when Subject is lesser than or equal to 4)
</div>
<div class="row" *ngIf="Subject>4" >
  Row 2 (Rendered when Subject is greater than 4)
</div>

某些IDE在编写代码时可能会显示'<'或'>'登录为语法错误，因为它们也用于HTML标记。但是，它不会引发任何编译或运行时错误。

Answer 2

尝试一下

<div class="row" *ngIf="Subject < 4 || Subject = 4" >

Answer 3

写一个简单的吸气剂

<div class="row" *ngIf="greaterThan(Subject, 4)" >

component.ts：

public greaterThan(subj: Subject, num: number) {
  return sub < num;
}

Answer 4

编辑器可能会选择<作为错误。使用少于*ngIf的角度实际上不是错误。 这可能是一个鲱鱼，所以请在其他地方查找问题。

就我而言，我遇到了一个空引用问题。例如

<span *ngIf="someArray">
  <span *ngIf="someArray.length < 3" class="keypadOutput">&nbsp;</span>
</span>

在某些情况下，someArray可以为null，因此我需要为*ngIf添加一个外部someArray检查。

Answer 5

我在使用相似的模板元素时遇到了同样的问题，

<p *ngFor="let msg of logMessages"
[ngClass]="{greaterThan4Class: (rowCount > 4)}"
>
{{msg}}
</p>

，在构建后导致html解析器错误，并导致应用在浏览器中崩溃。解析器将（rowCount> 4）中的大于号解释为打开的

解决方案：将此设置添加到tsconfig.json：

    "typeRoots": [
      "node_modules/@types"
    ],

注意：进行此更改后，我无法通过删除上述内容重现该问题。这也可以通过在Angular项目上执行[npm install]来解决。

Answer 6

<div class="row" *ngIf="4 > Subject">
<div class="row" *ngIf="4 >= Subject">

您已经完成对我来说很完美

Answer 7

可以使用小于 < 的 HTML 代码并且它可以工作。例如在您的问题中，请尝试：

<div class="row" *ngIf="Subject < 4" > <div class="row" *ngIf="Subject <= 4" >

Answer 8

您可以使用 HTML 实体 < ;和 >

<div class="row" *ngIf="Subject < 4" >

参考： https://www.w3schools.com/html/html_entities.asp#:~:text=To%20display%20a%20less%20than,for%20entity%20numbers%20is%20good.

Answer 9

只需将 ">" 和 "<" 运算符替换为它们的 HTML 编码，">"和“<”，分别为：

<div class="row" *ngIf="Subject &lt; 4" >

<div class="row" *ngIf="Subject &lt;= 4" >

HTML中的Angular Conditional不喜欢小于或大于符号

9 个答案: