angular - PrimeNg TabView 不适用于可观察量

Question

我正在尝试通过从服务器获取数据来填充 PrimeNG TabView 选项卡。然而，它们似乎与 Observables 配合得不好。我在这里发布了一个示例:

https://stackblitz.com/edit/primeng-nx7ryc?file=app%2Fapp.component.ts

• 由于我的 Angular 组件中没有初始项目，因此根本不会显示动态选项卡面板
• 对于一个初始项目，仅当单击 INITIAL 选项卡面板时才会显示动态选项卡面板

您能否建议解决此问题的方法？

Answer 1

要处理无初始项目的情况，您可以只输入 *ngIf="this.items?.length"在您的<p-tabView>上元素。

要处理无初始项和只有一个初始项的情况，您可以使用 activeIndex <p-tabView>的属性(property):

<p-tabView [activeIndex]="activeIndex"> <----- add [activeIndex] here
    <p-tabPanel *ngFor="let item of items; let i = index" [header]="item.username" [selected]="i == 0">
        [{{item.username}}]
    </p-tabPanel>
</p-tabView>

在数据到达后设置该值将触发 <p-tabView>刷新自身。

所以你的组件看起来像这样:

items = [
  { username: "INITIAL"}
];

activeIndex: number; // <--- declare but don't initialize

constructor(private http: HttpClient) {}

ngOnInit(): void {
  const source = this.get$();
  const subscribe = source.subscribe(result => {
      this.items = result.slice(0,3);
      this.activeIndex = 0; // <---- set to 0 to trigger p-tabView refresh
  });   
}

Here's a fork of your StackBlitz演示这种方法。