PrimeNg TabView 不适用于可观察对象

Question

我正在尝试通过从服务器获取数据来填充 PrimeNG TabView 选项卡。但是，它们似乎不能很好地与 Observables 配合使用。我在这里发布了一个示例：

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

由于我的 Angular 组件中没有初始项，因此根本不会显示动态选项卡面板
只有一个初始项，动态选项卡面板只会在单击初始选项卡面板时显示

你能建议一个解决方法吗？

Answer 1

要处理 no-initial-items 场景，您只需在 <p-tabView> 元素上放置一个 *ngIf="this.items?.length"。

要处理 no-initial-items 和 one-initial-item 两种情况，您可以使用 <p-tabView> 的 activeIndex 属性:

<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 展示了这种方法。

Answer 2

我向 PrimeNG 团队报告了一个非常相似的问题，PrimeNG 已在 10.0.1 版本中修复了该问题。尝试安装 primeng@10.0.1。

https://github.com/primefaces/primeng/issues/9331

Answer 3

TabPanel 也有类似的情况。在 PrimeNG 11 中，它不响应“isValidPaymentTerms”属性的更改。它只会在您 select 页面后执行。

<p-tabPanel header="Exceptional Payment Terms"
                    [selected]="Constants.C_PAYMENT == vTabSelected"
                    *[rightIcon]="isValidPaymentTerms ? '': 'fas fa-exclamation-triangle'"*>
...
        </p-tabPanel>

PrimeNg TabView 不适用于可观察对象

PrimeNg TabView does not work with observables

observable

primeng

angular