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

艾哈迈德

我是 angular 的新手,需要帮助来实现动态垂直选项卡:

我正在使用我在 ngIf 条件的 ngFor 循环中定义的变量 i。我不知道如何在 ngIf 条件中使用变量 i。我尝试了下面的代码,但它似乎不起作用。

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

代码:

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

}

马可

*ngIf i+3被认为是一个字符串。在进行数学运算之前,您必须关闭单引号。

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

完整示例:

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在 ngFor 循环中使用 ngIf 循环?

在Angular 2中使用* ngFor访问HTML模板中的局部变量

在angular 2中使用ngFor和ngIf施加条件

如果我们在angular 4中使用* ngFor,如何在一个实例上触发函数

如何在ngif中使用来自ngfor的变量?

Angular2-ngFor中的ngIf

node.js 如何在 for 循环中使用局部变量实现承诺感知?

如何在循环中使用 Func 或 Action 而不是局部变量?

Angular 4 ngFor & ngIf

在 Angular 9 中的 ngFor 中使用 *ngIf 时出现数组索引模式问题

无法在* ngFor中使用* ngIF:angular2

如何在ngFor循环中创建变量?

Angular如何在同一HTML元素上使用* ngIf和* ngFor

在 *ngIf 中访问局部变量

如何使用 ngFor 和 ngIf 选择 Angular 中的所有复选框?

Angular 2:如何让 *ngIf 使用包含它的 *ngFor 数组中的值?

Angular 自定义库 ngFor 和 ngIF 错误

Angular 2 ngIf和ngFor

Angular 2 ngFor和ngIf

如何在ngFor循环中填充Angular嵌套组件?

如何使用输入字段在Angular 4中的* ngFor循环中过滤项目

Angular2,将局部变量从* ngFor移动到模板中的任何位置

Angular 4:在* ngfor中以* ngif为模添加新的td

Angular 5中<tr>元素上的* ngFor和* ngIf

Angular - 将 *ngIf 和 *ngFor 用于表中的特定行

我们如何在 angular6 中使用 *ngFor 进行迭代以在 angular6 中一次显示 3 个图像

根据 Angular 4 中的变量在 *ngFor 循环中修改 HTML 标签

Angular-如何在ngFor循环中使用“此”项目的布尔值隐藏和显示内容

如何在ngFor循环中使用ngb-accordion?