Javascript Angular/Java脚本；模板在HTTP完成之前初始化

如何控制ngonit（）中变量的初始化

我有一个通过HTTPClient和get（）方法从服务器获取数据的服务。然后我获取数据并希望在blog组件中使用它

我有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();
            
            }));   
    }
}

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

---

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

要么将this.heroBlog和this.primaryBlog初始化为空数组，要么使用*ngIf=“heroBlog”在您的html中，使项目在具有值之前不会开始渲染，这将有助于避免错误如果“ngIf”是前进的方向，我现在可以获得所需的行为。谢谢你的帮助。祝你周末愉快。将this.heroBlog和this.primaryBlog初始化为空数组，或者在html中添加*ngIf=“heroBlog”，以便在项目具有值之前不会开始渲染，这将有助于避免错误如果“ngIf”是前进的方向，我现在可以获得所需的行为。谢谢你的帮助。祝你周末愉快。

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;
      });
    }