将ts标签中的离子标签附加到html

Question

我正在尝试在离子应用程序的HTML文件中添加div。 我已经创建了新的Div，并使用.innerHTML将其附加到HTML文件中的主div，但是未应用ionic标记。

我的html文件

 <div class="vehicle-profile" id="vehicle-profile" style="padding-bottom: 10px;">
    <div class="upload">
        <ion-grid>
          <ion-row>
            <ion-col col-2>
              <div class="upload-small" (tap)="scanBarcode(i)">
                <img src="assets/icon/barcode.png" width="50px">
                <p style="margin: 0"> SCAN</p>
              </div>
            </ion-col>
            <ion-col offset-1 col-9>
              <input type="text" class="formfield" placeholder="VIN #" [(ngModel)]="vin[i]"  name="vin_number[{{i}}]" (ngModelChange)="getVehicleInfo($event, i)">
            </ion-col>
            <ion-col col-6>
                <input type="text" class="formfield" placeholder="Year" [(ngModel)]="year[i]" name="year[{{i}}]">
            </ion-col>
            <ion-col col-6>
                <input type="text" class="formfield" placeholder="Make"  [(ngModel)]="make[i]"  name="make[{{i}}]">
            </ion-col>
            <ion-col col-12>
                <input type="text" class="formfield" placeholder="Model" [(ngModel)]="model[i]"  name="model[{{i}}]">
            </ion-col>
            <ion-col col-6>
                <input type="text" class="formfield" placeholder="Plate #" [(ngModel)]="plate_num[i]" name="plat_number[{{i}}]">
            </ion-col>
            <ion-col col-6>
                <input type="text" class="formfield" placeholder="Mileage" [(ngModel)]="mileage[i]" name="mileage[{{i}}]">
            </ion-col>
            <ion-col offset-4 col-4>
                <div class="delete-btn" >
                    <button type="button" ion-button block large (click)="removeVehicleBox(i)">
                      <p class="{{i}}">
                          Delete Profile
                      </p>
                    </button>
                  </div>
            </ion-col>
          </ion-row>
        </ion-grid>
      </div>
</div>

当我从.ts文件中追加相同内容时，它不会显示css效果。

TS文件

 addVehicleBox(){
    this.num = this.num+1;
    var content = document.createElement('div');      
    content.innerHTML = this.uploadBoxForm(this.num);
    document.getElementById('vehicle-profile').appendChild(content);
  }

  removeVehicleBox(selectedBox){
    console.log(selectedBox)
  }

  uploadBoxForm(i){
    let data = `
    <div class="upload">
    <ion-grid>
      <ion-row>
        <ion-col col-2>
          <div class="upload-small" (tap)="scanBarcode(`+i+`)">
            <img src="assets/icon/barcode.png" width="50px">
            <p style="margin: 0"> SCAN</p>
          </div>
        </ion-col>
        <ion-col offset-1 col-9>
          <input type="text" class="formfield" placeholder="VIN #" [(ngModel)]="vin[`+i+`]"  name="vin_number[`+i+`]" (ngModelChange)="getVehicleInfo($event, i)">
        </ion-col>
        <ion-col col-6>
            <input type="text" class="formfield" placeholder="Year" [(ngModel)]="year[`+i+`]" name="year[`+i+`]">
        </ion-col>
        <ion-col col-6>
            <input type="text" class="formfield" placeholder="Make"  [(ngModel)]="make[`+i+`]"  name="make[`+i+`]">
        </ion-col>
        <ion-col col-12>
            <input type="text" class="formfield" placeholder="Model" [(ngModel)]="model[`+i+`]"  name="model[`+i+`]">
        </ion-col>
        <ion-col col-6>
            <input type="text" class="formfield" placeholder="Plate #" [(ngModel)]="plate_num[`+i+`]" name="plat_number[`+i+`]">
        </ion-col>
        <ion-col col-6>
            <input type="text" class="formfield" placeholder="Mileage" [(ngModel)]="mileage[`+i+`]" name="mileage[`+i+`]">
        </ion-col>
        <ion-col offset-4 col-4>
            <div class="delete-btn" >
                <button type="button" ion-button block large (click)="removeVehicleBox(`+i+`)">
                  <p class="{{i}}">
                      Delete Profile
                  </p>
                </button>
              </div>
        </ion-col>
      </ion-row>
    </ion-grid>
  </div>
    `
    return data;
  }

在这里，我已附上图片，显示了从ts文件在内部html中使用ion标签的效果。 1是用html文件编写的离子标签，2是ts文件中附加的离子标签。 。

无论如何，我可以渲染离子标签吗？

Answer 1

您确定要添加CSS类和代码吗？ 我看到你的第二个例子

"style="padding-bottom: 10px;"

可能是您缺少CSS样式

var content = document.createElement('div');  

？