我正在尝试创建多个包含弹出窗口链接的下拉按钮。这是我的HTML代码：

<div *ngFor="let service of index.value | keyvalue: unsorted; let j = index" class ="btn-group">
      <ul style="list-style-type:none;">
        <li *ngFor ="let key of service.value | keyvalue: unsorted">   
          <ng-template #tipContent>Timestamp: {{key.value}} </ng-template>
          <button *ngIf="key.key.includes('timestamp')" class="btn btn-info dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" [ngbTooltip]="tipContent" id = "msg{{i}}{{j}}" [style.marginLeft.px] = "getLeftMargin(j)">
            {{service.key}}
          </button>


<!-- Error occurs here, unable to create this menu --> 
          <div *ngFor ="let msg of key.value | keyvalue: unsorted" class="dropdown-menu">
            <ng-template #tipContent>Timestamp: {{msg.value}} </ng-template>

          <!-- When this button is clicked, it displays a popup with the message in the div below -->
          <button *ngIf ="msg.key.includes('InTimestamp')" class ="dropdown-item" [ngbTooltip]="tipContent"  (click)="openPopUp(trace.traceId+'Incoming'+service.key)">
            Incoming
          </button>  
            <div *ngIf ="msg.key.includes('Incoming')" id="msg{{trace.traceId}}Incoming{{service.key}}" class ="modal">
              <div class="modal-content">
                <span id="close{{trace.traceId}}Incoming{{service.key}}" class='close'>&times;</span>
              <p>{{msg.value}}</p>
              </div>
            </div>
          
          
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Separated link</a>
          </div>
         
      
 
        </li>
      </ul>
      
    </div>

每当我单击下拉菜单时,就会出现以下错误：

zone-evergreen.js:171未捕获的TypeError：无法读取null的属性“set attribute”

为什么我一直得到这个错误，我该如何修复它？