从服务器加载数据时未定义 ContentChildren

Question

我正在从服务器加载一些数据并将其填充到 ng-content 中。我还试图让第一个选项卡默认处于活动状态。

如果我使用如下所示的一些静态内容，它工作正常（即第一个选项卡处于活动状态）

<app-tabs>
   <app-tab [title]="'Tab 1'"></app-tab>
   <app-tab [title]="'Tab 2'"></app-tab>
   <app-tab [title]="'Tab 3'"></app-tab>
</app-tabs>

如果我像下面这样从服务器检索数据，第一个选项卡未处于活动状态

<app-tabs>
    <app-tab *ngFor="let tab of tabDataFromServer" [title]="tab.name"> </app-tab>
</app-tabs>

应用url：https://angular-ivy-jvyzgn.stackblitz.io

编辑 url：https://stackblitz.com/edit/angular-ivy-jvyzgn?file=src/app/tabs/tabs.component.ts

请帮我解决这个问题。提前致谢:)

Answer 1

第一个选项卡的选择过早发生。一种解决方案是在创建 <app-tabs>

之前确保您拥有 tabDataFromServer 数组

<app-tabs *ngIf="tabDataFromServer.length">