在 onInit 和 afterViewInit 期间返回未定义的 Angular JSON 数据（错误类型错误）

Question

我是 Angular 的新手，我在我的

categories

组件中有一个

subcategories

和

navbar

的 JSON 数据。我有一个下拉

categorydetail

组件，它接受一个

Category

对象和

subcategories

JSON 响应，因此它可以匹配与类别 ID 匹配的子类别。

categories

JSON 渲染良好，但

subcategories

不一致。它有时被正确返回（作为一个对象），有时返回未定义。我尝试了不同的生命周期挂钩，但我似乎无法让它始终如一地返回。

---

navbar.component.html

<div>
    <ul id="navLinks" class="flex-row linklist">
        <li *ngFor="let category of categories.data">
            <a href="#">{{category.name}}</a>
            <div id="navDropdown">
                <div class="container flex-row">
                    <app-categorydetails [category]="category" [subcategory]="subcategories"></app-categorydetails>
                </div>
            </div>
        </li>
    </ul>
</div>
       

navbar.component.ts

import { Component, OnInit } from '@angular/core';
import { CategoriesService } from '../categories.service';
import { CategoryList } from 'src/assets/models/categories';
import { SubcategoriesService } from '../subcategories.service';
import { SubcategoryList } from 'src/assets/models/subcategories';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']
})

export class NavbarComponent {
  categories!: any;
  subcategories!: any;

  constructor(private CategoriesService: CategoriesService, 
              private SubcategoriesService: SubcategoriesService) {}

  ngOnInit(): void {
    // load JSONs
    this.categories = this.CategoriesService.getCategories().subscribe((data:CategoryList) => {
      this.categories.success = data.success;
      this.categories.message = data.message;
      this.categories.data = data.data;
    });

    this.subcategories = this.SubcategoriesService.getSubcategories().subscribe((data:SubcategoryList) => {
      this.subcategories.success = data.success;
      this.subcategories.message = data.message;
      this.subcategories.data = data.data;
    });
  }
}

categorydetails.component.html

<img class="img-adaptive" src="https://picsum.photos/240/300">
<div id="navDropdownLinks" class="flex-row">
    <div>
        <strong><p>NEW IN {{category.name.toUpperCase()}}</p></strong>
        <div *ngIf="subcategories">
            <ul class="linklist">
               <li *ngFor="let item of subcategories"><a href="#"><h3>{{item.name}}</h3></a></li>
            </ul>
        </div>
    </div>
</div>
<img class="img-adaptive" src="https://picsum.photos/240/300">

categorydetails.component.ts

import { Component, Input, AfterViewInit } from '@angular/core';
import { CategoryList, Category } from 'src/assets/models/categories';
import { Subcategory, SubcategoryList } from 'src/assets/models/subcategories';

@Component({
  selector: 'app-categorydetails',
  templateUrl: './categorydetails.component.html',
  styleUrls: ['./categorydetails.component.css']
})
export class CategorydetailsComponent {

  @Input() category!: Category;
  @Input() subcategory!: SubcategoryList;
  subcategories: Subcategory[] = [];


  constructor() {}
  // following an answer on another thread here on SO about setting a delay but I still get undefined at times
  ngOnInit(): void {
    setTimeout((_:any) => this.load());
  }

  // tried AfterViewInit but still inconsistent
  ngAfterViewInit(): void {
   //setTimeout((_:any) => this.load());
  }

  load(): void {
    // load passed JSON data
    console.log(this.subcategory.data);
    this.subcategories = this.subcategory.data.filter((item: Subcategory) => {
        return item.main_category == this.category.name;
    });
  }
}

我已经尝试将

load()

函数分配给 ngOnInit 和 ngAfterViewInit 但两者有时都返回未定义。有时它会起作用，但我希望它一直起作用。我还有一个版本，其中该函数绑定到父级

mousemove

上的

li

事件，它没有任何问题，这让我觉得我可能过早调用了该函数。我希望在没有用户干预的情况下加载数据。