首页 > 解决方案 > 如何获取单击文档的 ID 并获取标题并将其使用/保存在 Firestore 中?

问题描述

const setupProducts = (data) => {
  
    if (data.length) {
      let html = '';
      data.forEach(doc => {
        const product = doc.data();
        const li = `
          <li>
            <div class="collapsible-header grey lighten-4"> ${product.title} </div>
            <div class="collapsible-header grey lighten-4">  ${doc.id} </div>
            <div class="collapsible-body white"> ${product.content} 
            <a href="" class="secondary-content">
            <a class="btn orange modal-trigger" >Get ID</a>
            </a>
          </li>
        `;
        html += li;
      });
      productList.innerHTML = html
    } else {
      productList.innerHTML = '<h5 class="center-align">Login to view products</h5>';
    }
  };

我的想法是,我想通过单击文档来获取 ID,然后product.titledb.collection('activeWorks').doc(doc.id or product.id (I don't know what's right...)).set. 我不知道该怎么做,请帮忙

标签: javascripthtmlfirebasegoogle-cloud-firestoreonclicklistener

解决方案


也许做这样的事情:将id每个元素的标签设置<li>为 Firestore 中的 doc id,然后附加一个onclick事件触发器

  const setupProducts = (data) => {

if (data.length) {
  let html = '';
  productList.innerHTML = ''
  data.forEach(doc => {
    const product = doc.data();
    const li = `
      <li id="${doc.id}">
        <div class="collapsible-header grey lighten-4"> ${product.title} </div>
        <div class="collapsible-header grey lighten-4">  ${doc.id} </div>
        <div class="collapsible-body white"> ${product.content} 
        <a href="" class="secondary-content">
        <a class="btn orange modal-trigger" >Get ID</a>
        </a>
      </li>
    `;
    html += li;
    productList.innerHTML += html
    document.getElementById(doc.id).onclick = () => {
        // do firestore stuff here
        // db.collection('activeWorks').doc(doc.id).set(your_data)
    }
  });
} else {
  productList.innerHTML = '<h5 class="center-align">Login to view products</h5>';
}
};

如果我误解了你的问题我很抱歉


推荐阅读