PrimeNg TabView 不适用于可观察对象答案

【问题标题】：PrimeNg TabView does not work with observablesPrimeNg TabView 不适用于可观察对象
【发布时间】：2021-01-15 18:17:30
【问题描述】：

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

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

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

您能否为此提出解决方法？

【问题讨论】：

标签： angular observable primeng

【解决方案1】：

要处理无初始项目的情况，您只需在 <p-tabView> 元素上放置一个 *ngIf="this.items?.length"。

要处理无初始项目和只有一个初始项目的情况，您可以使用<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 演示了这种方法。

【讨论】：

谢谢，现在可以使用了！只是好奇——你是怎么找到这个 activeIndex 技巧的——在他们的文档中吗？
@marin，是的，activeIndex 在他们的TabView documentation 中的一个名为 Programmatic Control 的部分中。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

我有一个与 TabPanel 类似的案例。在 PrimeNG 11 中，它不响应对“isValidPaymentTerms”属性的更改。只有在您选择页面后才会执行此操作。

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

【讨论】：