how to generate the div block via TS

 <div class="QQ-all" id="QQ-all">   //this is the templet what I want
     <div class="second-connect" id="down_arrow">
         <img src="assets/imgs/wifi-connect.png" class="second-connect-item-down" id="down_arrow_img">
     </div> 

      <div class="swiper-container" id="swiper-container">
         <div class="swiper-wrapper" >
             <div class="swiper-slide" style="background-image:url(assets/imgs/wap7531.png);" *ngFor="let con of RP_DEVICE;">
                 <div class="swiper-text">{{con.second}}</div>
              </div> 
         </div>
              
          <div class="swiper-pagination"></div>
      </div>
      
       <div class="swipe-connect" *ngIf="check_second">
          <img src="assets/imgs/wifi-connect.png" class="ap-connect-item-left">
          <img src="assets/imgs/device.png" class="connect-device">
       </div> 
</div> 

 this.RP_NEXT_DEVICE=[ //Json data for ngFor
      {"mac":"AC:6F:B1","seventh":"quana","ip":"192.168.0.149","ninth":"37.4.0.122"},
      {"mac":"AC:6F:B2","seventh":"quanna","ip":"192.168.0.148","ninth":"37.4.0.122"},
      {"mac":"AC:6F:B3","seventh":"qqqqqq","ip":"192.168.0.148","ninth":"37.4.0.122"},
      {"mac":"AC:6F:B4","seventh":"quantenna","ip":"192.168.0.148","ninth":"4"}
 ]

repeaterAdd():void{//generating the block
    let g=` <div class="QQ-all" id="QQ-all">   

              <div class="second-connect" id="down_arrow">
                <img src="assets/imgs/wifi-connect.png" class="second-connect-item-down" id="down_arrow_img">
              </div>
          `
    let d=` <div class="swipe-connect" *ngIf="check_second">
              <img src="assets/imgs/wifi-connect.png" class="ap-connect-item-left">
              <img src="assets/imgs/device.png" class="connect-device">
              </div> 
            </div>
          `
   // console.log("g = "+g+d)


    let v="<div class='swiper-slide' style='background-image:url(assets/imgs/wap7531.png);'></div>"

    let asf="";

    this.RP_NEXT_DEVICE.forEach(va=>{//using the for loop to generate repeated div(ngFor is not working)
      asf=asf.concat(v);
    })
     
    let dd=`
          <div class="swiper-container s1" id="swiper-container">
            <div class="swiper-wrapper">
          `

    let p=`    <div class="swiper-text" id="swiper-text">${this.RP_NEXT_DEVICE[0]["seventh"]}</div>
    </div> 
   
    <div class="swiper-pagination"></div>
  </div>`

    

    let aas=g.concat(dd).concat(asf).concat(p)

    console.log("小貓~ = "+aas)


    setTimeout(() => {
      var swiper = new Swiper('.s1', {
        pagination: {
          el: '.swiper-pagination',
          type: 'bullets',
        },
        effect: 'flip',
        centeredSlides: true,
        flipEffect: {
          limitRotation:true,
          slideShadows: false,
        },
        on: {
          init: function () {
            console.log('swiper s1 initialized');
           
          }
        },
        loop: true
      });

      swiper.on('slideChange',()=>{
        this.index_=swiper.realIndex;
        document.getElementById("swiper-text").innerHTML=this.RP_NEXT_DEVICE[this.index_]["seventh"]
       console.log(swiper.realIndex)
      })
    }, 500);
   

    const row_div=document.createElement('ion-row');
    const col_div=document.createElement('ion-col');

    row_div.style.height="40%";
    row_div.id="added_div";
    col_div.classList.add("col");
    row_div.classList.add("row");
    col_div.innerHTML=aas;
  
    row_div.appendChild(col_div);
    document.getElementById("ion_grid").appendChild(row_div);

  }