javascript - 角/Java 脚本；模板在 HTTP 完成前初始化

Question

IP如何控制ngOnInit()中变量的初始化？

我有一个通过 Angular HTTPClient 和 get() 方法从服务器获取数据的服务。我然后我把数据拿来，想在博客组件中使用它。

我有 3 个单独的变量。所有博客，HeroBlog 和 PrimaryBlog。heroBlog 和 primaryBlog 在订阅方法之前执行。并且没有初始化，请看下面的代码

博客文章服务

import { Injectable} from '@angular/core';
import { Blog } from '../_interfaces/blog.model';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';
import { Subject} from 'rxjs';

@Injectable({
    providedIn: 'root'
})
export class BlogPostService {

    heroBlogSubject  = new Subject <Blog> ();
    primaryBlogSubject  = new Subject <Blog> ();
    blogPostsSubject = new Subject <Blog []>();
    allBlogs:Blog [] = [];

    constructor ( private httpClnt :HttpClient){}
    //Get Blogs From Server
    getBlogsFromServer (){
      return this.httpClnt.get('https://bc-blog-86b3b.firebaseio.com/blogs.json').pipe(
            map((response) => {
                for (const key in response) {
                    if (response.hasOwnProperty(key)) {
                        this.allBlogs.push( {...response[key], blogKey:key});
                    }
                }
                this.heroBlogSubject.next(this.allBlogs[this.allBlogs.length-1]);
                return this.allBlogs.reverse();
            
            }));   
    }
}

博客文章组件

export class BlogComponent implements OnInit, OnDestroy{

    blogs: Blog [];
    heroBlog: Blog;
    primaryBlog: Blog;
    blogSubscription: Subscription;
    dataRecived : boolean;
    constructor(private blgServ: BlogPostService){
    }

  ngOnInit() {
    this.blgServ.getBlogsFromServer().subscribe( (responseData)=>{
        this.dataRecived = false;
        
        this.heroBlog = responseData [0]
        this.primaryBlog = responseData [1];
        this.blogs = responseData;
        this.dataRecived = true;
      });
    }

如您所见，我正在尝试在 Subscribe() 中分配 heroBlog 和 primaryBlog。但是，初始声明首先被执行，导致模板不显示 2 个博客并导致错误。

我应该如何在 ngOnit() 上实现/初始化这两个变量，或者如何确保我的所有属性都具有屏幕呈现的值？

标签： javascriptangular