Angular ngIf 在 else 中有多个语句

Question

如何用 else 下的多个语句编写 ngIf？我有一种感觉，我在做一些愚蠢的事情，但惊讶地发现除了我之外没有其他人处于这种情况。 *ngIf=col !='动作'; else showActions;iWouldLiketoAddAnotherAssignmentHere;

if(condition){
statement1;
statement2;
}else
{statement3;
 statement4;
 statement5;
}

有人不理解问题并不代表问题不明确。这就是我上次离开SO的原因，你不理解的问题不要再标记了，让其他理解的人回答或忽略它。

Answer 1

您是否正在寻找then else？

<ng-container *ngIf="col !='actions'; then noActions; else showActions;></ng-container>

<ng-template #noActions>
 I have no actions
</ng-template>

<ng-template #showActions>
 I have some actions
</ng-template>

你甚至可以用多个扩展它

<ng-container *ngIf="col !='actions'; then noActions; else (col === 'actions' && showActions) || (something === 3 && somethingElse)";></ng-container>

<ng-template #noActions>
 I have no actions
</ng-template>

<ng-template #showActions>
 I have some actions
</ng-template>

<ng-template #somethingElse>
 I have some something else
</ng-template>

Answer 2

根据最佳实践，模板上不应有更多逻辑。因为它可能会导致难以跟踪错误和未经测试的场景。

在您的组件中移动这些逻辑。并创建多个标志，然后尝试显示/隐藏确切的段。

Answer 3

在模板中处理此类多个条件的最佳方法是使用 ngSwitch，查看 Angular 文档 https://angular.io/api/common/NgSwitch

Answer 4

谢谢，我确实看过，但不符合我的要求。我不认为我会被困在这么简单的事情上，但我在这里。当 if 条件评估为 true 或 false 时，我是否可以拥有多个语句？

我猜你正在寻找ngSwitch

参考https://angular.io/api/common/NgSwitch

更新：

经过深思熟虑，我希望，我终于能够弄清楚你的要求......

<ng-container *ngIf="col !='actions'; else multilpleActions">
  ...
</ng-container>

<ng-template #multilpleActions>
  <ng-container *ngTemplateOutlet="showAction"></ng-container>
  <ng-container *ngTemplateOutlet="anotherAction"></ng-container>
</ng-template>

<ng-template #showAction>
  ...
</ng-template>

<ng-template #anotherAction>
  ...
</ng-template>

我真的希望这会有所帮助。

更新（修改后）

让我指出，*ngIf 不适用于按顺序运行的代码语句，但适用于只是文本的 HTML 模板。 *ngIf 对 单个元素 执行 boolean 操作，并让您从 2 个模板中选择一个要呈现到其中的模板。在任何给定时间，您都可以仅将一个模板呈现给一个元素。所以你要求的是不可能的。如果您需要将多个模板呈现给一个元素，唯一的出路是将它们作为父元素的子元素并将父元素呈现给元素。

编码愉快！