ngOnInit中的angular 2订阅

时间:2018-01-02 10:55:12

标签: angular typescript firebase asynchronous subscription

我将模拟社交媒体应用程序。此应用程序中将有帖子。但是帖子没有填充。

ngOnInit() {
  this.loadPosts(this.path,this.opts) 
}

loadPosts(path, opts?) {
    this.getPosts(path, opts).subscribe((posts: any[]) => {
        this.posts = posts;
    });
}

getPosts(path, opts?: any) {
    opts ? opts.query.limitToFirst = this.scrollDistance : opts = { query: { 
    orderByChild: "order", startAt: this.offset, limitToFirst: 
    this.scrollDistance } }
    return this.afm.list(path, opts);
}

当我尝试记录"帖子"时,它会写入控制台,但html中不会有任何操作。

HTML代码如下所示。当我写

时,它会在ihtml中显示类似[]的帖子数组
{{posts | json}}
<div *ngFor="let post of posts;let i=index" class="post-item">
  <div class="card infinite-scroll  postContainer">
    <app-post-item [post]="post"></app-post-item>
    <app-comment-loader [user]="user" [post]="post"></app-comment-loader>
  </div>
  <img class="banner2" *ngIf="i==0" src="assets/images/ads-banner2.gif" 
     alt="banner2">
</div>

发布样本:

{
    "comments" : [ {
      "html" : "Deneme1",
      "modifyDate" : 1514229331213,
      "text" : "Deneme1",
      "user" : {
        "firstname" : "İbrahim",
        "lastname" : "DOLAPCİ",
        "profileImage" : "nqY4EvvY9gRE3qW7V8HAuf5AL3s2%2FprofileImage",
        "username" : "dolapci"
      }
    }],
    "files" : [ {
      "name" : "ae43a2a6-da89-4553-b139-b9675acfea13",
      "type" : "image"
    } ],
    "innerText" : " #ŞikayetimVar @fakirmeyvasikacagi Elle sıksak daha iyi :( tam bir hayal kırıklığı ! ",
    "likes" : [ {
      "firstname" : "İbrahim",
      "lastname" : "DOLAPCİ",
      "profileImage" : "nqY4EvvY9gRE3qW7V8HAuf5AL3s2%2FprofileImage",
      "username" : "dolapci"
    } ],
    "modifyDate" : 1514229074031,
    "settings" : {
      "isAllowComments" : true,
      "isGlobal" : true,
      "isNameSecret" : true,
      "isOnlyFriend" : false
    },
    "text" : " <a href=\"hashtag/şikayetimvar\">#ŞikayetimVar</a> <a href=\"product/fakirmeyvasikacagi\">@fakirmeyvasikacagi</a> Elle sıksak daha iyi :( tam bir hayal kırıklığı ! ",
    "user" : {
      "firstname" : "Övgü",
      "lastname" : "Bayram",
      "profileImage" : "uhjK5PzmaTbIjDQP0KMjiOgrLJx1%2FprofileImage",
      "username" : "ovgub"
    },
    "valueOf" : 7,
    "valueOf_ModifyDate" : "7_1514229074031"
  }

1 个答案:

答案 0 :(得分:-1)

因为你的代码用完了Angular Zone

constructor(private zone: NgZone) {}

loadPosts(path, opts?) {
    this.getPosts(path, opts).subscribe((posts: any[]) => {
         this.zone.run(() => {
                this.posts = posts;
         });
    });
}