ngOnInit 中的 Angular 2 订阅答案

【问题标题】：angular 2 subscription in ngOnInitngOnInit 中的 Angular 2 订阅
【发布时间】：2018-06-12 01:58:19
【问题描述】：

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

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 中显示类似 [] 的帖子数组

{{帖子 | 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"
  }

【问题讨论】：

粘贴我们的 HTML 文件
显示您的 html，同时尝试将 <pre>{{posts | json}}</pre> 添加到您的 HTML 中，这可能会为您提供更多信息，以防您尝试访问错误的对象属性。

当我写

{{posts | 时，它会在 ihtml 中显示类似 [ ] 的帖子数组json}}

你能给我们一个posts的样本

标签： angular typescript firebase asynchronous subscription

【解决方案1】：

因为你的代码用完了 Angular Zone

constructor(private zone: NgZone) {}

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

【讨论】：