Question

如何在*ngIf声明中包含多个案例？我已经习惯了Vue或Angular 1而拥有if，else if和else，但似乎Angular 4只有true（{{ 1}}）和if（false）条件。

根据文档，我只能这样做：

else

但我希望有多种条件（类似）：

  <ng-container *ngIf="foo === 1; then first else second"></ng-container>
  <ng-template #first>First</ng-template>
  <ng-template #second>Second</ng-template>
  <ng-template #third>Third</ng-template>

但我最终不得不使用<ng-container *ngIf="foo === 1; then first; foo === 2; then second else third"></ng-container> <ng-template #first>First</ng-template> <ng-template #second>Second</ng-template> <ng-template #third>Third</ng-template>，感觉就像是黑客：

ngSwitch

或者，在Angular 4中我似乎已经习惯了很多Angular 1和Vue中使用的语法，所以建议的方法是用类似条件来构造我的代码。此？

Answer 1

另一种选择是嵌套条件

<ng-container *ngIf="foo === 1;else second"></ng-container>
<ng-template #second>
    <ng-container *ngIf="foo === 2;else third"></ng-container>
</ng-template>
<ng-template #third></ng-template>

Answer 2

你可以使用：

<ng-template [ngIf]="index == 1">First</ng-template>
<ng-template [ngIf]="index == 2">Second</ng-template>
<ng-template [ngIf]="index == 3">Third</ng-template>

除非ng-container部分对你的设计很重要，我猜想。

这是Plunker

Answer 3

这似乎是最干净的方法

if (foo === 1) {

} else if (bar === 99) {

} else if (foo === 2) {

} else {

}

在模板中：

<ng-container *ngIf="foo === 1; else elseif1">foo === 1</ng-container>
<ng-template #elseif1>
    <ng-container *ngIf="bar === 99; else elseif2">bar === 99</ng-container>
</ng-template>
<ng-template #elseif2>
    <ng-container *ngIf="foo === 2; else else1">foo === 2</ng-container>
</ng-template>
<ng-template #else1>else</ng-template>

请注意，当条件涉及不同的变量时，的工作方式应该是正确的else if语句（一次只有1个案例为真）。其他一些答案在这种情况下无法正常工作。

除了：gosh angular，这是一些非常丑陋的else if模板代码...

Answer 4

您可以使用基于sitaution的多种方式：

如果您的变量仅限于特定的数字或字符串，则最好使用ngSwitch或ngIf：
```
Float
```

以上不适合 if elseif 代码和动态代码，您可以使用以下代码：

from sqlalchemy import *
from sqlalchemy.ext.declarative import declarative_base
Base = declarative_base()

class Product(Base):
    __tablename__ = 'price'
    date = Column(String(9))
    price = Column(Float(8))
    name = Column(String(10))

注意：您可以选择任何格式，但请注意每个代码都有自己的问题

Answer 5

或者只是将条件链与三元运算符一起使用。 if … else if … else if … else链。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator#Conditional_chains

<ng-container *ngIf="isFirst ? first: isSecond ? second : third"></ng-container>

<ng-template #first></ng-template>
<ng-template #second></ng-template>
<ng-template #third></ng-template>

我更喜欢这种方式。

Answer 6

为避免嵌套和ngSwitch，还存在这种可能性，它利用了逻辑运算符在Javascript中的工作方式：

<ng-container *ngIf="foo === 1; then first; else (foo === 2 && second) || (foo === 3 && third)"></ng-container>
  <ng-template #first>First</ng-template>
  <ng-template #second>Second</ng-template>
  <ng-template #third>Third</ng-template>

Answer 7

如果使用 ng-container，则不需要使用 *ngIf

<ng-container [ngTemplateOutlet]="myTemplate === 'first' ? first : myTemplate === 
   'second' ? second : third"></ng-container>

  <ng-template #first>first</ng-template>
  <ng-template #second>second</ng-template>
  <ng-template #third>third</ng-template>

Answer 8

<ion-row *ngIf="cat === 1;else second"></ion-row>
<ng-template #second>
    <ion-row *ngIf="cat === 2;else third"></ion-row>
</ng-template>
<ng-template #third>

</ng-template>

Angular已在许多引擎盖下使用ng-template   我们一直使用的结构性指令：ngIf，ngFor和   ngSwitch。

>什么是Angular中的ng-template

https://www.angularjswiki.com/angular/what-is-ng-template-in-angular/

Answer 9

您还可以使用这个古老的技巧将复杂的if / then / else块转换为更简洁的switch语句：

<div [ngSwitch]="true">
    <button (click)="foo=(++foo%3)+1">Switch!</button>

    <div *ngSwitchCase="foo === 1">one</div>
    <div *ngSwitchCase="foo === 2">two</div>
    <div *ngSwitchCase="foo === 3">three</div>
</div>

Answer 10

我遇到了这种情况 Expression.Error: Token Literal expected. Details: let Source = Csv.Document(File.Contents(& myPath & myFile)),[Delimiter=";", Columns=6, Encoding=1250, QuoteStyle=QuoteStyle.None]), #"Changed Type" = Table.TransformColumnTypes(Source,{{"Column1", type text}, {"Column2", type text}, {"Column3", type text}, {"Column4", type text}, {"Column5", type text}, {"Column6", type text}}) in #"Changed Type" 并使用 *ngIf elseIf else 解决了，希望以下代码片段可以简要描述，

我有一个名为“NIC”的表单控件，需要在表单控件无效时一次显示一条错误消息。

ng-template

模板

form: FormGroup = new FormGroup({
    NIC: new FormControl('', [Validators.required, Validators.minLength(10), Validators.maxLength(10), Validators.pattern("^[0-9]*$")])
  });

* ng if if if in template

10 个答案: