我是 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
事件,它没有任何问题,这让我觉得我可能过早调用了该函数。我希望在没有用户干预的情况下加载数据。