Angular 6中模板中的动态href和id答案

【问题标题】：Dynamic href and id in template in Angular 6Angular 6中模板中的动态href和id
【发布时间】：2019-07-22 10:58:48
【问题描述】：

我正在使用 Angular 6 做一个 Web 应用程序，并在模板中添加了一个选项卡窗格。我想动态生成href 和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，具体取决于我的数组中有多少对象，以便能够单击每个选项卡并查看其内容。

【问题讨论】：

Dynamically assign element id inside ngFor 可能重复并在 Angular 的属性指令中设置 href (stackoverflow.com/questions/37948504/…)

标签： angular

【解决方案1】：

您可以轻松使用此语法，以下将按预期工作：

<a href="{{'#tab_' + your expression here}}"></a>

您也可以像这样使用 attr 前缀进行绑定：

<a [attr.href]="'#tab_' + your expression here"></a>

【讨论】：

您能在 stackblitz 上提出您的问题吗？或者只是在页面某处写下您的变量 {{'#tab_' + your expression here}}，这样您就可以看到您实际生成的内容...
它现在正在工作。我在ngFor 中的ngIf 存在逻辑问题。我用过href="{{'#tab_' + i}}" 和id="{{'tab_' + i}}。

【解决方案2】：

以下解决方案对我有用：

<a href="{{'mailto:' + data.emailId }}"> Send Mail </a>
<a href="{{'tel:' + data.phoneNumber }}"> +911234567890 </a>
<a href="{{'/' + data.redirectURL }}"> Open Google </a>

【讨论】：