foreach of queryselector runs 2 times and synatx for applying top and left position to each element from *ngFor(Angular7)

I have an html content which I am assignin git to div and iterating over and getting its value in *ngfor
I have issue in iterating(the foreach of queryselector iterates 2 times or more and the correct syntax to assign left and top positions to each element

droppeditem : string[]=[];    
floor.droppeditem = this.droppeditem;
const floorImagePlanConatiner = document.createElement("div");

floorImagePlanConatiner.innerHTML = floor.image; 

floorImagePlanConatiner.querySelectorAll('div div')
                .forEach(div => {
                    floor.droppeditem = [];
                    floor.droppeditem.push(div.textContent);
                    div.querySelectorAll('span').forEach(span => {
                        floor.droppeditem.push(span.textContent);
                      });
                      console.log(floor.droppeditem)
                    });

html

 <div class="box" *ngFor="let existingZone of floor.droppeditem" 
  [style.left.px]=""  [style.top.px]="">
                    {{ existingZone }}
 </div>

The content which I’ll be iterating over

 <div xmlns="http://www.w3.org/1999/xhtml" _ngcontent-c6="" appdropzone="" 
  appmovablearea="" class="dropzone" id="toget" ng-reflect-ng-style=" 
  [object Object]" style="width: 100%;
  background-image: url(&quot;data:image/jpeg;base64,/9//2Q==&quot;);
  background-repeat: no-repeat; background-position: center center; 
  background-size: 100% 100%; border: 1px solid black; height: 340px;">

  <!--bindings={
  "ng-reflect-ng-for-of": " 502 "
   }-->

 <div _ngcontent-c6="" appmovable="" class="box draggable movable ng-star- 
 inserted"
  ng-reflect-ng-style="[object Object]" touch-action="none" 
  style="transform: translateX(196%) translateY(109.6%);">

  502

 <span _ngcontent-c6="" style="display: none">-196.00003051757812</span>
 <span _ngcontent-c6="" style="display: none">-109.5999755859375</span>

 </div>

 <!--bindings={
 "ng-reflect-ng-for-of": ""
  }-->

 <div _ngcontent-c6="" appmovable="" class="box draggable movable 
  ng-star- inserted" ng-reflect-ng-style="[object Object]" touch- 
  action="none" style="transform: translateX(196%) translateY(109.6%);">

  1002

 <span _ngcontent-c6="" style="display: none">-164.00003812</span>
 <span _ngcontent-c6="" style="display: none">-12.5999755859375</span>

 </div>

 </div>

I need to display divs textcontent , and getting values out of span and passing it to each element being iterated over. So i need to display 502 , 1002 of each of the divs and apply their respective span values in top and left properties to that divs

Source: New feed
Source Url foreach of queryselector runs 2 times and synatx for applying top and left position to each element from *ngFor(Angular7)