如何从消防局取数据并将其附加到我的HTML

时间:2019-05-18 15:21:13

标签: jquery html google-cloud-firestore angular7 angular-ngmodel

所以基本上我是anqular7的新手,我有一个数据库和集合 的“用户”,并想浏览此用户,我有多个用户,并使用了文件名 并将其显示在我的html

中的某个位置

我尝试使用jquery并将其附加到('p')。appendchild('li'),但它只给我第一个名称,该名称是我的集合中console.log(doc.data()。fullName );它向我展示了它可以遍历所有用户

这是导航到我的数据库

snapshot.docs.forEach(doc=>{
  this.renderout(doc)

```}
 this is the function 

````renderout(doc) 
  {
    let li=document.createElement('li');
  let name=document.createElement('span');
      li.setAttribute('data-id',doc.id);
    //  console.log(doc.id);

    name.textContent=doc.data().fullName;
   // name.textContent+=doc.data().Email;
    this.Nametest=name.textContent;

    $('p').appendChild(li);  

  console.log(doc.data().fullName);

 ````` } 

this  is my html 
````<p id="user1">Some text.. 1 {{Nametest}}</p>
      <img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
    </div>
    <div class="col-sm-3"> 
      <p id="user2">Some text.. 2 {{Nametest}}</p>
      <img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
    </div>
    <div class="col-sm-3"> 
      <p>Some text.. 3 {{Nametest}}</p>
      <img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
    </div>
    <div class="col-sm-3"> 
        <p>Some text.. 4 {{Nametest}}</p>
        <img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
```      </div>



i expected to navigate throug the p and in each  the for each loop
finish  user1 will have name"test1"
         user2 will have name"test2"
       user3 will have name"test3"
inside the {{Nametest}}

0 个答案:

没有答案