是否有一种方法可以将数据从Firestore显示为物化模式中的select？

Question

我正在尝试在物化模式内的选择列表中显示存储在Firestore中的数据。我为制作模态而创建的代码是：

      <button class="btn red darken-2 z-depth-0 admin modal-trigger" data-target="modal-delete" style="display: none;"> Slett øvelse </button>


      <div id="modal-delete" class="modal">
        <div class="modal-content">
          <h4> Slett øvelse </h4><br />
            <select id="delete-form" class="" style="display: block;">

            </select>
            <button class="btn red darken-2 z-depth-0" style="margin-top: 5px;"> Slett </button>
        </div>
      </div>

这将显示一个带有空列表的模态，如果我将一个选项标签放在select下，它也将起作用。但是我试图显示存储在Firestore中的数据，以便用户随后可以选择一项并将其删除。我尝试过这样的事情：

function renderGuides(doc){
  let option = documents.createElement('option');
  let title = document.createElement('span');


  option.setAttribute('data-id', doc.id)
  title.textContent = doc.data().title;

  li.appendChild(title); // Line 74

  deleteForm.appendChild(li);
}

db.collection('øvelser').get().then((snapshot) => {
  snapshot.docs.forEach(doc => { // Line 80
    renderGuides(doc); // Line 81 
  });
});

这不起作用，并且显示此错误代码：

Uncaught (in promise) ReferenceError: li is not defined
    at renderGuides (index.js:74)
    at index.js:81
    at Array.forEach (<anonymous>)
    at index.js:80 

我尝试了多种解决方案，但似乎都没有用。使这项工作最简单的方法是什么？

之后，我打算添加它以删除列表中的选定数据，但是由于我什至无法显示它们，因此我可以继续测试是否可行：

 cross.textContent = 'x';

li.appendChild(cross);

cross.addEventListener('click', (e) => {
  e.stopPropagation();
  let id = e.target.parentElement.getAttribute('data-id');
  db.collection('øvelser').doc(id).delete();
}

而且我只是想知道这是否应该工作？

非常感谢您的帮助

Answer 1

欢迎使用StackOverflow！此错误不言自明。您没有在代码中定义什么是“ li”。我假设“ li”是从Firebase读取的对象的列表/数组，但我看不到您是否在定义它。另外，我建议您从JS中的数组中选择push and pop项，而不要附加[]