angular - Angular 6中模板中的动态href和id
问题描述
我在 Angular 6 中做一个 Web 应用程序,并在模板中添加了一个选项卡窗格。我想动态生成href
and id
。
<div class="nav-tabs-custom">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab_1" data-toggle="tab" aria-expanded="true">Session 1</a></li>
<ng-container *ngFor="let session of data?.sessions; index as i">
<li class="" *ngIf="i > 0">
<a href="#tab_{{i}}" data-toggle="tab" aria-expanded="false">Session {{i + 1}}</a>
</li>
</ng-container>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab_1">
Working good.
</div>
<!-- /.tab-pane -->
<ng-container *ngFor="let session of data?.sessions; index as i">
<div class="tab-pane" id="tab_{{i}}" *ngIf="i > 0">
Not working.
</div>
<!-- /.tab-pane -->
</ng-container>
</div>
<!-- /.tab-content -->
</div>
例如,如果我的对象数组包含 3 个对象,则应该出现 3 个选项卡,并且我应该能够单击它们以查看内容。
我努力了:
[href]="'#tab_' + i"
[id]="'tab_' + i"
我的目标是生成href
和id
取决于我的数组中有多少对象能够单击每个选项卡并查看其内容。
解决方案
您可以轻松使用此语法,以下将按预期工作:
<a href="{{'#tab_' + your expression here}}"></a>
您还可以使用 attr 前缀进行绑定,如下所示:
<a [attr.href]="'#tab_' + your expression here"></a>
推荐阅读
- javascript - 如何在javascript中将多个对象转换为键值对的数组[]
- javascript - 一旦评估为真,“删除”测试条件
- react-native - 在抽屉堆栈之间传递参数 react-navigation
- java - 如何从Java子目录中的类创建对象
- scala - 如何将 Flink DataSet 元组转换为一列
- c# - 在启动时设置 cookie (MVC .Net Core)
- java - 如何在相同的比较方法中也对名字进行排序
- android - 用于音频设备的 Android 蓝牙配对
- elasticsearch - Logstash 是否维护注册表文件?
- c# - 创建一个自定义属性,提示 Resharper 隐式使用该属性