如何为angular 4中的每个div获取不同的ID？

我使用的是Angular 4，我有一个div，我试图通过点击事件动态地重复它。代码如下所示：

map.component.html

<div id="'EachClickDifferentID'" class="map" ></div>

    <div class="container-fluid">
  <div class="page-header">
    <h1>Widget Generator</h1>
  </div>
  <div class="row">
    <div class="col-lg-12">
      <div class="panel panel-default">
        <div class="panel-heading">Fenstergenerator</div>
        <div class="panel-body">
          <div class="input-group">
                                <span class="input-group-btn">
                                    <button type="button" class="btn btn-primary" (click)="grid.addDynamicCellComponent(selectedComponentType)">Add Widget</button>
                                </span>
            <select class="form-control" [(ngModel)]="selectedComponentType">
              <option *ngFor="let cellComponentType of componentTypes" [ngValue]="cellComponentType">{{cellComponentType.name}}</option>
            </select>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-12">
      <div class="panel panel-default">
        <div class="panel-heading">DarstellungS</div>
        <div class="panel-body">
          <grid-component #grid></grid-component>
        </div>
      </div>
    </div>
  </div>
</div>

问题：如何为每个div生成一个不同的id并将其绑定，以便在每次单击事件中呈现我的地图？ 目前，我只得到一张地图的第一次点击事件，没有更多

要创建动态组件，我使用上面的代码：

app.component.widget.html

<div id="'EachClickDifferentID'" class="map" ></div>

    <div class="container-fluid">
  <div class="page-header">
    <h1>Widget Generator</h1>
  </div>
  <div class="row">
    <div class="col-lg-12">
      <div class="panel panel-default">
        <div class="panel-heading">Fenstergenerator</div>
        <div class="panel-body">
          <div class="input-group">
                                <span class="input-group-btn">
                                    <button type="button" class="btn btn-primary" (click)="grid.addDynamicCellComponent(selectedComponentType)">Add Widget</button>
                                </span>
            <select class="form-control" [(ngModel)]="selectedComponentType">
              <option *ngFor="let cellComponentType of componentTypes" [ngValue]="cellComponentType">{{cellComponentType.name}}</option>
            </select>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-12">
      <div class="panel panel-default">
        <div class="panel-heading">DarstellungS</div>
        <div class="panel-body">
          <grid-component #grid></grid-component>
        </div>
      </div>
    </div>
  </div>
</div>

小部件生成器
芬斯特发生器
添加挂件
{{cellComponentType.name}
暗柱肺

您的

div

是否在*ngFor内？如果你的div在*ngFor中，你可以使用ngForNo的

索引，我没有使用*ngForthan你如何“动态重复”？请发布
（点击）
事件的html，它是ts。我发布了整个代码，因为我认为如果不是这样的话可能很难理解。动态创建组件有几个依赖项。但我认为有可能将html代码中的我的id引用到map.component.ts中动态生成的id？您的
div
是否在*ngFor中？如果你的div在*ngFor中，你可以使用ngForNo的
索引，我没有使用*ngForthan你如何“动态重复”？请发布
（点击）
事件的html，它是ts。我发布了整个代码，因为我认为如果不是这样的话可能很难理解。动态创建组件有几个依赖项。但我认为有可能#html代码中的我的id引用到map.component.ts中动态生成的id？