javascript - 如何在模式中显示动态内容？

Question

当我点击一个按钮时，我想打开一个模态，在那个模态中，我想显示一些我从服务器获得的数据。我使用 JSON 服务器作为假服务器，使用 Materialize css 作为 css 框架。我只能部分打开模式并显示部分数据。我在控制台中看不到任何错误。这是我的 Github 存储库的链接: https://github.com/Ivan3628/IT-logger-js

HTML

<ul>
        <li>
          <a
            href="#tech-list-modal"
            class="btn-floating green modal-trigger tech-collection"
            ><i class="material-icons">person</i></a
          >
          <!--Tech list modal-->
          <div id="tech-list-modal" class="modal">
            <div class="modal-content">
              <h4>Technician List</h4>
              <ul class="collection" id="tech-workers"></ul>
            </div>
          </div>
        </li>
</ul>

应用程序.js

const showTechList = () => {
  axios
    .get("http://localhost:5000/techs")
    .then(response => ui.showList(response.data))
    .catch(err => console.log(err));
};

document
  .querySelector(".tech-collection")
  .addEventListener("click", showTechList);

用户界面

class UI {
  constructor() {
    this.techList = document.querySelector("#tech-workers");
  }
 showList(techs) {
    let output = "";

    techs.forEach(tech => {
      output += `
      <li class="collection-item">
      <div>
       ${tech.firstName} ${tech.lastName}
       <a href="#!" class="secondary-content delete-tech" data-id="${tech.id}">
          <i class="material-icons grey-text">delete</i>
        </a>
      </div>
    </li>`;
    });
    this.techList.innerHTML = output;
  }
}

export const ui = new UI();

数据库.json

{
"techs": [
    {
      "firstName": "Jennifer",
      "lastName": "Williams",
      "id": 1
    },
    {
      "firstName": "John",
      "lastName": "Doe",
      "id": 2
    },
    {
      "firstName": "Sam",
      "lastName": "Smith",
      "id": 3
    }
  ]
}

Answer 1

我解决了它。我认为这可能是物化 css 的问题。我没有使用列表来显示内容，而是使用行而不是列表项，我使用 col s12 循环数据。

html

  <!--Technician list-->
          <div id="tech-list-modal" class="modal">
            <div class="modal-content">
              <h4>Technician list</h4>
              <div class="row" id="tech-workers"></div>
            </div>
          </div>

用户界面

showList(techs) {
    let output = "";

    techs.forEach(tech => {
      output += `
     <div class="col s12">
      ${tech.firstName} ${tech.lastName}
       <a href="#!" class="secondary-content delete-tech" data-id="${tech.id}">
          <i class="material-icons grey-text">delete</i>
        </a>
        <div class="divider"></div>
      </div>

   `;
    });
    this.techList.innerHTML = output;
  }