Html 如何在angular中使用（#）动态设置id？

我正在开发一个使用动态组件的angular 6应用程序。我正在使用

@ViewChild（'''.{read:ViewContainerRef}）为了引用
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>

解决方案对我不起作用

有什么可能的方法可以实现这一点吗？
这可能会有帮助。嗨，@RaviRajput，我不能使用
id=“{{item.value}}”
，因为
ViewContainerRef
无法识别它。它需要在
#id
语法中，在
ngAfterViewInit（）{console.log（document.getElementById（'1'）；}
在
*ngFor
中使用时，使用#reference指向每个迭代中的不同元素后，可以获取对元素的引用，因此无需自动生成#引用<代码>
这种用法是错误的，并且不是使用模板引用变量的正确方法