无法在 angular 5 的数据库中显示我的页面中的数组数据? [英] Can't show my array data in my page from database in angular 5?

问题描述

希望你们一切都好，所以我遇到了一个小问题，我正在从 firebase 获取数据，我有一个包含数组的数组，我想在我的视图中显示它，但我不能，我会的编写我的代码并解释我稍后想要实现的目标.

这是我数据库中的数据:

帖子--- 1--- 推动者 -- 埃里克"---内容:这里写了一些东西"- - 注释--- 1--- 评论:是"---评论员:帕特里克"--- 2--- 评论:我不这么认为"---评论员:莎拉"--- 2--- 推动者 -- 帕特里克"--- 内容:新闻在这里.."- - 注释--- 1--- 评论:是"---评论员:伊内丝"

我在 app.component.ts 中获取数据:

导出类 AppComponent 实现 OnInit {pubs:Observable;构造函数(私有数据库:AngularFireDatabase){}ngOnInit(){this.pubs = this.getData('/posts');}getData(path):Observable{返回 this.db.list(path).valueChanges()}}

这是我的 HTML 代码:

<p>publisher {{post.publisher}}</p><p>内容:{{post.content}}</p><div>{{post.comments}}</div><ul><li *ngFor="let cmt of post.comments" >{{cmt.comment}}</li>

但是我的控制台出现错误:

错误类型错误:无法读取未定义的属性注释"

但是当我只写 {{cmt}} 而不是 {{cmt.comment}} 时，我得到这样的东西:

出版商:Erick内容:这里写了一些东西,[对象对象],[对象对象]——- [对象对象]- [对象对象]出版商:帕特里克内容 : 新闻在这里,[对象对象]——- [对象对象]

这意味着我正在获取我的对象，但第一个总是空的，我不知道为什么，我想显示我的评论文本.

我希望我能很好地解释我的问题，任何帮助将不胜感激.

解决方案

听起来你只需要 安全导航操作符，因此模板不会在定义对象之前尝试访问该对象的属性.

尝试以下操作:

<li *ngFor="let cmt of post.comments" >{{ cmt?.comment }}</li>

I hope you're all fine, so I am having a little problem, I am getting data from firebase and I have an array containing an array and I want to show it in my view but I can't, I will write my code and explain what I want to achieve later.

This is the data in my database :

posts 
     --- 1 
          --- puslisher -- "Erick" 
          --- content :   "Something is written here"
          --- comments 
                      --- 1
                           --- comment : "Yes"
                           --- commentator : "Patrick"  
                      --- 2 
                           --- comment : "I dont think so "
                           --- commentator : "Sarah"
     --- 2 
          --- puslisher -- "Patrick" 
          --- content :   "News here .."
          --- comments 
                      --- 1
                           --- comment : "Yes"
                           --- commentator : "Ines"  

I get the data in my app.component.ts :

export class AppComponent implements OnInit {

    pubs:Observable<any[]>;
    constructor(private db:AngularFireDatabase){
    }
    ngOnInit(){
       this.pubs = this.getData('/posts');
    }

    getData(path):Observable<any[]>{
       return this.db.list(path).valueChanges()
    }

}

Here is my HTML code :

<div *nfFor="let post of pubs | async ">
    <p>publisher {{post.publisher}}</p>
    <p>content : {{post.content}}</p>
    <div>{{post.comments}}</div>
    <ul> 
       <li *ngFor="let cmt of post.comments" >{{cmt.comment}}</li>
    </ul>
</div>

But I am getting an error in my console :

ERROR TypeError: Cannot read property 'comment' of undefined

But when I write only {{cmt}} instead of {{cmt.comment}}, I get something like this :

publisher: Erick
content : Something is written here 

,[object Object],[object Object]

- 
- [object Object]
- [object Object]



publisher: Patrick
content : News here 

,[object Object]

- 
- [object Object]

Which means That I am getting my objects but the first one is always empty, I don't know why, and I want to show my comment text.

I hope I well explained my problem, any help would be much appreciated.

解决方案

It sounds like you just need the safe navigation operator so the template doesn't try to access the properties of the object before it is defined.

Try the following:

<li *ngFor="let cmt of post.comments" >{{ cmt?.comment }}</li>

这篇关于无法在 angular 5 的数据库中显示我的页面中的数组数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！