如何在 angular 中使用 (#) 动态设置 id？

Question

我正在开发一个使用动态组件的 angular 6 应用程序。我使用@ViewChild('<id>', { read: ViewContainerRef }) <id>;是为了引用divs我将用动态组件填充。在ViewContainerRef寻找一个#带有ID标签来识别它是指在模板中哪个项目。

我创建了一个手风琴，我想在其中动态添加一个特定的可重用组件，我通过上述过程在整个应用程序的其余部分一直在做。但是，由于手风琴中有许多选项卡，我想添加一个循环，使用*ngFor它可以为我完成工作，我在其中设置#id使用循环中指定的值。我实现了以下模板：

<app-create-feature-modal></app-create-feature-modal>
<app-button description="{{ 'pages[knowledge_base][buttons][accordion_add]' | translate }}" class="btn btn-primary btn-md accordion-button" (callFunction)="add()"></app-button>
<div class="acc">
  <div *ngFor="let item of meta; let i = index">
    <button class="accordion" (click)="toggle(i)">{{item.name}}</button>
    <div class="{{'panel panel-'+ i}}">
      <div #{{item.value}}></div>   <!--here-->
    </div>
  </div>
</div>

但是，在运行应用程序时，id未正确设置，在检查控制台时，我看到对的引用@ViewChild未定义，甚至在 html 中也没有定义 id，只是普通的 div。

我无法使用，id="{{item.value}}"因为ViewContainerRef无法识别它，这就是此解决方案对我不起作用的原因。

有什么可能的方法可以实现这一目标吗？

Answer 1

你会使用[attr.id]="item.value".

<div [attr.id]="item.value"></div>