javascript - 将 Ionic 标签从 ts 文件附加到 html

Question

我正在尝试在我的 ionic 应用程序中的 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 中使用 ionic 标签的效果。 1 是用 html 文件编写的 ionic 标签，2 是 ts 文件中附加的 ionic 标签。 .

无论如何我可以渲染 ionic 标签吗？

Answer 1

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

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

可能是您的

中缺少 css 样式

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

?