Javascript 如何以编程方式调用设置*ngFor源代码的方法并呈现相应的html

我在做一个角度项目

当用户单击某个类别时，我需要显示相应的子类别

例如，通过点击饮料，我需要显示：可口可乐，芬达，百事可乐

例如，通过点击食物，我需要显示：汉堡，土豆，鱼

当我点击主组时，它就起作用了，子组正在按预期变化和显示

但我想将饮料设置为默认类别，因此当我来到屏幕时，我想看到饮料和可口可乐，芬达，百事。。就像我用手按饮料一样

我试图在下一步实现这一点：

第1步：

从数据库获取数据、所有主类别、所有子类别，因此我可能会应用过滤器-基于categoryId-获取所有子类别：

export class MainScreenCategories implements OnInit {

  @Input() groups: Group[];
  @Input() subGroups: Group[];
  filteredSubGroups: Group[];
  selectedId: string;
  selectedSubId: string;

  constructor(
  private _ref: ChangeDetectorRef, 
  private _activatedRoute: ActivatedRoute, 
  private _groupService: GroupService, 
  private _http: HttpClient,
  private _articleService: ArticleService,
  private _globalHelper: GlobalHelperService
  ) { }

  ngOnInit() {
    this.selectedId = '78ebcad8-8cb0-4172-8cd8-bb6fb6b3bf53';
    this.groups = this._activatedRoute.snapshot.data['groups'];
    this.subGroups = this._activatedRoute.snapshot.data['subGroups'];

    // This is source to my template directive *ngFor - filteredSubGroups
    this.filteredSubGroups = this.subGroups.filter(item => item.parentId == this.selectedId);
    console.log(this.filteredSubGroups);

    //this._ref.detectChanges();

    //I've tried adding timeout while fetching data
    //this._groupService.getAll().subscribe(data => setTimeout(() => this.groups = data, 0));
    //this._groupService.getAllSubGroups().subscribe(data => setTimeout(() => this.subGroups = data, 0));

  }

第二步：

编写一些HTML以显示数据：

<div class="tab-pane" id="whatever">
  <ul>
    <li *ngFor="let subgroup of filteredSubGroups">
      <button type="button" data-toggle="" data-target="" class="btn categories-btn">
                {{subgroup.title | uppercase}}
      </button>
    </li>
  </ul>
</div>

{{subgroup.title |大写}}

正如你们看到的，我正在循环

filteredSubGroups

来显示子类别

而我的

console.log（filteredSubGroups）

在

ngOnInit

中也包含正确的数据，但当我第一次运行应用程序时，我在控制台中收到以下消息：

当我清除console并转到另一个组件的模板，然后返回到此模板时，我可以看到在我的控制台中不再有错误，只记录了3个子类别，因为我在

ngOnInit

console.log（filteredSubGroups）

,

但即使它们被记录，它们在html模板中也不可见，这是最大的问题，我不明白为什么

谢谢各位

---

任何帮助都是很棒的

也许您应该订阅激活的路由数据。 用这样的东西

this.route.data.subscribe((data) => {
    if(data){
      const {groups, subGroups} = data;
      this.groups = groups;
      this.subGroups = subGroups;
      this.filteredSubGroups = this.subGroups.filter(item => item.parentId == this.selectedId);
    }

})

---

可能发生的情况是，对路由的第一次调用由于null而终止组件。然后，在数据有时间异步获取后，单击周围以重新初始化组件。

您能否编辑我的示例以准确显示要编辑的内容？我尝试了一些方法，但不幸的是，这对我不起作用：(