Question

我正在研究使用动态组件的Angle 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无法识别它，这就是this解决方案对我不起作用的原因。

有什么办法可以实现这一目标？

如何在angular中动态使用（＃）设置ID？

0 个答案: