How to use *ngIf else?
我使用的是angular，我想在这个例子中使用
1 2 3 4 5 | content here ... other content here... |
我怎样才能实现与
角度4和5：
使用
1 2 3 4 | content here ... <ng-template #other_content>other content here...</ng-template> |
您也可以使用
1 2 3 | here is ignored <ng-template #content>content here...</ng-template> <ng-template #other_content>other content here...</ng-template> |
或仅限于
1 | <ng-template #content>content here...</ng-template> |
演示：
柱塞
细节：
The HTML
element is a mechanism for holding client-side
content that is not to be rendered when a page is loaded but may
subsequently be instantiated during runtime using JavaScript.
角度4.x.x您可以通过四种方式使用ngif来实现简单的if-else过程：
只使用if
1 | If isValid is true |
使用if和else(请通知templatename)
1 2 3 4 5 6 | If isValid is true <ng-template #templateName> If isValid is false </ng-template> |
使用if with then(请通知templatename)
1 2 3 4 5 6 | Here is never showing <ng-template #templateName> If isValid is true </ng-template> |
与then和else一起使用if
1 2 3 4 5 6 7 8 9 10 | Here is never showing <ng-template #thenTemplateName> If isValid is true </ng-template> <ng-template #elseTemplateName> If isValid is false </ng-template> |
Tip: ngIf evaluates the expression and then renders the then or else
template in its place when expression is truthy or falsy respectively.
Typically the:
- then template is the inline template of ngIf unless bound to a different value.
- else template is blank unless it is bound.
为了使用Observable，如果Observable数组由数据组成，我通常会这样做来显示。
1 2 3 4 5 6 7 8 | .... <ng-template #emptyList> ... </ng-template> |
"bindemail"它将检查电子邮件是否可用。如果存在电子邮件，则注销将显示，否则登录将显示
1 2 3 4 5 6 7 8 9 10 11 12 13 | <li *ngIf="bindEmail;then logout else login"> </li> <ng-template #logout> <li> Logout </li> </ng-template> <ng-template #login> <li> Login </li> </ng-template> |
ngif表达式的结果值不仅是布尔值true或false
如果表达式只是一个对象，它仍然将其评估为真实的。
如果对象未定义或不存在，则ngif将其评估为虚假。
常用的是如果一个对象被加载，存在，然后显示这个对象的内容，否则显示"正在加载……"。
1 2 3 4 5 6 7 | Still loading........... <!-- the content of this object --> object.info, object.id, object.name ... etc. |
另一个例子：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | things = { car: 'Honda', shoes: 'Nike', shirt: 'Tom Ford', watch: 'Timex' }; Nice car! <ng-template #noCar> Call a Uber. </ng-template> <!-- Nice car ! --> |
Anthoer示例：
1 2 3 | Nice {{ car }}! <!-- Nice Honda! --> |
NGIF模板
NGIF角4
在角4 EDOCX1中，5的语法与Java中的条件运算符非常相似。
在爪哇中，使用
在角4.0中，使用
在HTML标记或模板上可以使用两种if条件：
Syntax for ngIf/Else
1 2 | Truthy condition <ng-template #elseBlock>Falsy condition</ng-template> |
要添加模板，我们只需要显式地将其绑定到模板。
1 2 3 | ... <ng-template #thenBlock>Then template</ng-template> <ng-template #elseBlock>Else template</ng-template> |
有关详细信息
角度4、5和6
我们可以简单地创建一个模板引用变量[2]并将其链接到*ngif指令内的else条件。
可能的语法[1]是：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!-- Only If condition --> ... <!-- or --> <ng-template [ngIf]="condition">...</ng-template> <!-- If and else conditions --> ... <!-- or --> <ng-template #elseBlock>...</ng-template> <!-- If-then-else --> <ng-template #thenBlock>...</ng-template> <ng-template #elseBlock>...</ng-template> <!-- If and else conditions (storing condition value locally) --> {{value}} <ng-template #elseBlock>...</ng-template> |
演示：https://stackblitz.com/edit/angular-feumnt？嵌入=1&file=src/app/app.component.html
资料来源：
我知道这已经有一段时间了，但如果有帮助的话，我想补充一下。我使用的方法是在组件中使用两个标志，在对应的两个标志中使用两个ngif。
它很简单，可以很好地与Ng模板和材料一起工作。
1 2 | <ng-template #ConnectedContent class="data-font">Connected</ng-template> <ng-template #DisconnectedContent class="data-font">Disconnected</ng-template> |