主页 / 问题 / 1093884
Accepted
midnightelf18
Asked:2020-03-12 22:33:51 +0000 UTC2020-03-12 22:33:51 +0000 UTC

如何在 Ionic 4 中使用打字稿将 DOM 元素添加到 HTML 页面

  • 772

我的 html 组件看起来像这样

<ion-header>
  <ion-toolbar>
    <ion-title>Мои записи</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content fullscreen>

  <ion-button expand="full" (click)="updateEntryList()" color="warning"> Обновить список записей</ion-button>


  <div class="entry">
      <div class="docFullname"></div>
      <div class="rating"></div>
      <div class="workPlace"></div>
      <div class="price"></div>
      <div class="time"></div>
  </div>


</ion-content>

而组件类中的按钮点击功能是这样的

  async updateEntryList() {
    const toast = await this.toastController.create({
      message: "Список записей был обновлен",
      duration: 3000
    });
    toast.present();

    fetch("../../../assets/entryData/entryData.json")
    .then( response => {
      if (!response.ok) console.log("Promise has been failed");
      return response.json();
    })
    .then(data => {
      for (var key in data)
        console.log(key)
    });




    fetch("../../../assets/entryData/entryData.json")
    .then(response => {
      if (!response.ok) console.log("Yup, it's wrong");
      return response.json();
    })
    .then(data => {
      const fullnameElems = document.getElementsByClassName("docFullname");
      const ratingElems = document.getElementsByClassName("rating");
      const workPlaceElems = document.getElementsByClassName("workPlace");
      const priceElems = document.getElementsByClassName("price");
      const timeElems = document.getElementsByClassName("time");

      for (var i = 0; i < fullnameElems.length; i++) {
        (fullnameElems[i] as HTMLDivElement).textContent = data.fullname;
        (ratingElems[i] as HTMLDivElement).textContent = data.rating;
        (workPlaceElems[i] as HTMLDivElement).textContent = data.workPlace;
        (priceElems[i] as HTMLDivElement).textContent = data.price;
        (timeElems[i] as HTMLDivElement).textContent = data.time;
      }
    });


  }

正如您在组件类中看到的，我只是将文本数据添加到从 .json 文件中获取的标签中。但是使用这种方法，我只是覆盖了这些标签的文本内容，并且我需要在点击时创建具有相同文本内容的完全相同的元素。简单地说，当我点击时，我需要复制这个

  <div class="entry">
      <div class="docFullname"></div>
      <div class="rating"></div>
      <div class="workPlace"></div>
      <div class="price"></div>
      <div class="time"></div>
  </div>
typescript

1 个回答

  1. Best Answer

    如果一个 ！！！

    假设 Ionic 只是 CustomElements 并且可以像普通 DOM 一样进行操作。

    abstract class Data {
    fullname: string;
    rating: string;
    workPlace: string;
    price: number;
    time: number;
}
class FakeData extends Data {
    static i = 0
    constructor() { super(); FakeData.i++ }

    fullname: string = `fullname ${FakeData.i}`
    rating: string = `rating ${FakeData.i}`
    workPlace: string = `workPlace ${FakeData.i}`
    price: number = FakeData.i
    time: number = FakeData.i
}

const gen = (data: Data) => `
  <div class="entry">
      <div class="docFullname">${data.fullname}</div>
      <div class="rating">${data.rating}</div>
      <div class="workPlace">${data.workPlace}</div>
      <div class="price">${data.price}</div>
      <div class="time">${data.time}</div>
  </div>
`

const el: HTMLElement = document.body

el.insertAdjacentHTML('beforeend', gen(new FakeData))
el.insertAdjacentHTML('beforeend', gen(new FakeData))
el.insertAdjacentHTML('beforeend', gen(new FakeData))

    在这里你可以运行

    "use strict";
class Data {
}
class FakeData extends Data {
    constructor() {
        super();
        this.fullname = `fullname ${FakeData.i}`;
        this.rating = `rating ${FakeData.i}`;
        this.workPlace = `workPlace ${FakeData.i}`;
        this.price = FakeData.i;
        this.time = FakeData.i;
        FakeData.i++;
    }
}
FakeData.i = 0;
const gen = (data) => `
  <div class="entry">
      <div class="docFullname">${data.fullname}</div>
      <div class="rating">${data.rating}</div>
      <div class="workPlace">${data.workPlace}</div>
      <div class="price">${data.price}</div>
      <div class="time">${data.time}</div>
  </div>
  <hr>
`;
const el = document.body;
el.insertAdjacentHTML('beforeend', gen(new FakeData));
el.insertAdjacentHTML('beforeend', gen(new FakeData));
el.insertAdjacentHTML('beforeend', gen(new FakeData));

    • 0

相关问题