我面临着多重嵌套的问题 ngIf
应用于 ng-template
Angular.js 中的元素,我似乎无法得到完美的答案。我知道解决方法,但它们没有优化。
这是我要运行的代码:
<div class="container">
<ng-template *ngIf="booleanA;then caseA else caseB">
<ng-template #caseA>
<el>1</el>
<el>2</el>
</ng-template>
<ng-template #caseB>
<ng-template *ngIf="booleanB">
<el>3</el>
<el>4</el>
<el>5</el>
</ng-template>
</ng-template>
</ng-template>
</div>
这些是我找到的两个解决方案:
将 ngIf 放在
#caseB
中的每个子元素上元素:<ng-template #caseB> <el *ngIf="booleanB">3</el> <el *ngIf="booleanB">4</el> <el *ngIf="booleanB">5</el> </ng-template>
放置周边
class="container"
#caseA
里面的元素和#caseB
,并应用第二个ngIf
对它:<ng-template *ngIf="booleanA;then caseA else caseB"> <ng-template #caseA> <div class="container"> <el>1</el> <el>2</el> </div> </ng-template> <ng-template #caseB> <div *ngIf="booleanB" class="container"> <el>3</el> <el>4</el> <el>5</el> </div> </ng-template> </ng-template>
这些解决方案的问题在于优化。第一个检查多次相同的值,第二个使用相同的 HTML 元素两次。
有什么方法可以让原始设计发挥作用吗?
编辑:这两个解决方案不会显示为代码块,因此我将它们设置为内联代码。如果您知道如何解决这个问题,我们将不胜感激。
编辑 2:对我正在寻找的内容进行一些澄清:最终目标不是让代码正常工作,我已经找到了在所有其他方法都失败时可以使用的解决方法。
最终目标是让此代码仅与 Angular 的逻辑元素一起工作 <ng-template>
并遵循原始设计;并且没有其他原生元素的帮助,例如div
,这会改变 DOM。
最佳答案
你需要做的两个改变
- 使用
ng-container
- 使用
div
而不是嵌套的ng-template
请看这个stackblitz
<div class="container">
<ng-container *ngIf="booleanA; then caseA; else caseB">
</ng-container>
<ng-template #caseA>
<span>1</span>
<span>2</span>
</ng-template>
<ng-template #caseB>
<div *ngIf="booleanB">
<span>3</span>
<span>4</span>
<span>5</span>
</div>
</ng-template>
</div>
关于html - 如何正确嵌套多个 ng-if?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50293748/