如何在模态框中展示动态内容？

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>

app.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);

ui.js

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();

db.json

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

- Ivan

---

我只能部分地打开模态框并显示我的数据的一部分。你能看到哪一部分？你可以发布一个屏幕截图或使用console.log()吗？ - Cadu De Castro Alves

请添加截图。 - Rkv88 - Kanyan

哎呀，这里迫切需要更多的信息。 - Sean Doherty

我能够在点击按钮时打开一个模态框，但我只能看到其中一个项目，而我在JSON服务器上有三个项目。此外，该项目出现在标题上方，应该在下面。我在Github仓库中发布了一个链接，您可以下载整个应用程序并自行查看，我将尝试按照要求在小分辨率下发布屏幕截图。 - Ivan

你在response.data中得到了什么？它只是一个"techs"数组，还是一个带有属性"techs"的对象，其中包含一个数组？如果是后者，我认为你应该遍历response.data.techs，而不是response.data。 - i.brod

我认为我得到了一个数组，因为我在我的axios调用中调用了techs对象（其中包含一个数组）。axios.get（“http://localhost:5000/techs”） - Ivan

Answer 1

我解决了。我认为这可能与Materialize 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>

ui.js

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;
  }

- Ivan

Answer 2

明确一点，将ul>li放置在materializcss模态框内绝对没有任何问题。这里有一个CodePen来进行演示：

https://codepen.io/doughballs/pen/RwPpLZY

我们从模态框内部开始一个空的 ul：

<!-- Modal Structure -->
  <div id="modal1" class="modal">
    <div class="modal-content">
      <h4>Modal Header</h4>
      <ul class="collection" id="tech-workers">
        <!-- no content! -->
      </ul>
    </div>
    <div class="modal-footer">
      <a href="#!" class="modal-close waves-effect waves-green btn-flat">x</a>
    </div>
  </div>

为了生成动态内容，我使用了一个选择器。这可以是任何东西 - 数据库调用、本地存储、页面内容 - 任何东西。但对于这个演示来说，使用一个选择器很容易：

    <select>
      <option value="" disabled selected>Choose your option</option>
      <option value="1">Add 1 item</option>
      <option value="2">Add 2 items</option>
      <option value="3">Add 3 items
    </select>

然后，当选择改变时，我获取该值并将其用作循环，以向ul附加新的集合项，首先清除它，以便每次都有一个新鲜的模态框。

$('select').on('change',function(){

    var selected = Number( $('select').find(":selected").val() );

    $('#tech-workers').empty();

      for(var i=1; i <= selected; i++ ) {
        $('#tech-workers').append(`<li class="collection-item">I am item number ${i}</li>`);
      }

    $('.modal').modal('open');

  });

- Sean Doherty