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

当我点击一个按钮时，我想打开一个模式，在这个模式中，我想显示我从服务器获取的一些数据。我使用JSON服务器作为假服务器，并将css具体化为css框架。我只能部分打开模式并显示部分数据。我在控制台中没有看到任何错误。 这是指向我的Github回购的链接：

HTML

ui.js

---

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

html

技术员名单

ui.js

showList（技术人员）{
让输出=”；
techs.forEach（tech=>{
输出+=`
${tech.firstName}${tech.lastName}
`;
});
this.techList.innerHTML=输出；
}

需要明确的是，将ul>li放置在CSS中的模式中绝对没有问题。使用代码笔演示：

我们从模态内部的单个空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。这可以是任何东西——数据库调用、本地存储、页面内容——任何东西。但对于本演示，可以很容易地使用选择：

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

选择你的选择
添加1项
添加2项
添加3项

然后，当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');

  });

$（'select'）。在（'change'，function（）上{
var selected=Number（$（'select'）.find（“：selected”）.val（）；
$（“#技术工人”）.empty（）；
对于（var i=1；i“我只能部分打开模态并显示我的部分数据”，您可以看到哪个部分？您可以发布屏幕截图或console.log（）吗它？请添加screenshotAye，这里急需更多信息。当我点击按钮时，我可以打开一个模式，但我只能看到其中一个项目，我在JSON服务器上有三个项目。此外，该项目出现在标题上方，它应该在下面。我发布了一个指向我的Github repo的链接，如果你愿意，可以下载整个应用程序并查看它就你自己而言，我将尝试按照他们的要求发布一个小分辨率的屏幕截图。你从response.data中得到了什么？它只是一个“techs”数组，还是一个属性为“techs”的对象，其中包含一个数组？如果是后者，我认为你应该迭代response.data.techs，而不是response.data
{
"techs": [
    {
      "firstName": "Jennifer",
      "lastName": "Williams",
      "id": 1
    },
    {
      "firstName": "John",
      "lastName": "Doe",
      "id": 2
    },
    {
      "firstName": "Sam",
      "lastName": "Smith",
      "id": 3
    }
  ]
}

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

<!-- 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>

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

  });