无法将动态*ngSwitchCase值与[class.active]绑定

Question

我需要动态呈现垂直选项卡及其相关值(在右侧div中(

我正在尝试将动态创建的[class.active]字段与动态创建的*ngSwitchCase绑定，但没有成功。不知道我错过了什么。

这是我的代码，

<!--Below is the vertical list that gets populated, THIS WORKS, factor list gets populated-->
<ul>
<li [class.active]="subSectionName == 'proposals'">
<a (click)="subSectionName = 'proposals'">Proposal Summary</a></li>

<li *ngFor="let val of factor; let i=index"
[class.active]="factorName == 'factor'+i">
<a (click)="factorName == 'factor'+i">{{val.factorTitle}}</a></li>
</ul>
<!--Below is the code for the right section divs data that renders 
on clicking the related tab from the vertical tabs -->
<div [ngSwitch]="subSectionName">
<div *ngSwitchCase="'proposals'">
<div><h2>Proposal Summary</h2></div>  <!--THIS WORKS-->
</div>
</div>     
<!--BELOW DOES NOT RENDER-->
<div *ngFor="let val of factor; let i=index" [ngSwitch]="factorName">
<div *ngSwitchCase="'factor'+i"> <div>Factor {{val.factorTitle}} </div>
</div>                    

我试着只使用索引值，也使用val.id，但不起作用。我还尝试在subSectionName switchcase中循环ngSwitchcase for factor。我不确定*ngSwitchCase名称是否与选项卡名称不匹配，或者它没有正确绑定。

请帮忙。

Answer 1

我不能说这是这里唯一的问题，但不能在Angular中向同一个元素添加两个结构指令。与关闭div标记相比，打开div标记似乎多了一个，这也可能导致此问题。最后，因为不能在同一个元素上使用ngFor和ngSwitchCase指令，所以必须在新的div中将ngSwitchCase降低一个级别，如果它不满足条件，那么ngFor将创建一个不添加任何值的空div。

相反，尝试将未呈现的位更改为：

<ng-container *ngFor="let val of factor; let i=index">
<div *ngIf="factorName === 'factor'+i">{{val.factorTitle}}</div>
</ng-container>

如果这不起作用，请尝试在stackblitz中重新创建您的问题，以便我们可以看到您的确切用例并提供进一步帮助。

Answer 2

它可能会帮助一些人，因此发布我的代码。进行了以下更改，现在正在工作，

<div>
<ul>
<li [class.active]="subSectionName == 'proposals'">
<a (click)="subSectionName = 'proposals'">Proposal Summary</a>
</li>

<li *ngFor="let val of factor; let i=index"
[class.active]="subSectionName == 'factor'+i">
<a (click)="subSectionName = 'factor'+i">{{val.factorTitle}}</a>
</li>
</ul>
</div>
<div [ngSwitch]="subSectionName">
<div *ngSwitchCase="'proposals'">
<div><h2>Proposal Summary</h2>
</div>                    

<div *ngFor="let val of factor; let i=index" >
<div *ngSwitchCase="'factor'+i"> 
<div>Factor {{val.factorTitle}} </div>
</div>
</div>
</div>