在 angular 中，我们如何在 ngFor 循环中定义的 ngIf 中使用局部变量？

Question

I am new to angular and need the help in implementing the dynamic vertical tabs:

I am using the variable i that I defined in the ngFor loop in the ngIf condition. I don't know how to use the variable i in the ngIf condition. I tried the below code but it doesn't seem to work.

 <div
          class="pb-5"
          *ngFor="let studentBatch of studentBatchList; let i = index"
        >
          <div
            id="{{ 'tab-content-' + (3 + i) }}"
            *ngIf="currTab == 'tab-content-(3+i)'"
          >
            {{ i + 3 }} <br />
            {{ studentBatch.batchId }}
          </div>
        </div>

TS code:

showtabcontent(id) {
debugger;
id = 'tab-content-' + id;
// this.currTab = 'tab-content-0';
this.currTab = id;
alert(id);

}

Answer 1

In the *ngIf i+3 is considered as a string. You must close the single quote before making mathematical operation.

*ngIf="currTab == 'tab-content-' + (3 + i)"

Complete example:

<div class="pb-5" *ngFor="let studentBatch of studentBatchList; let i = index">
    <div id="{{ 'tab-content-' + (3 + i) }}" *ngIf="currTab == 'tab-content-' + (3 + i)">
        {{ i + 3 }} <br />
        {{ studentBatch.batchId }}
    </div>
</div>