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

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

我需要动态呈现垂直选项卡及其相关值（在右侧 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 名称是否与选项卡名称不匹配，或者是否没有正确绑定。

请帮忙。

解决方法

我不能说这是这里唯一的问题，但是你不能在 Angular 中向同一个元素添加两个结构指令。看起来您的开始 div 标签比结束 div 标签多一个，这也可能导致此问题。最后，因为您不能在同一个元素上使用 ngFor 和 ngSwitchCase 指令，所以您必须在新 div 中将 ngSwitchCase 下一级，如果没有t 满足条件，则 ngFor 将创建一个不添加任何值的空 div。

相反，尝试将未渲染的位更改为：

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

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

,

它可能对某人有所帮助，因此发布了我的代码。 进行了以下更改，现在可以使用了，

<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>