使用 ionic2-super-tabs 标签的动态标签数量

Question

我的应用程序页面中没有固定数量的标签，因此在 ionic2-super-tabs 标签中使用 *ngFor 来获取动态标签，如下面的 ts 和 html 所述。

打字稿：

import { AustraliaPage } from './australia';
import {CanadaPage} from './canada';

export class CountryPage {

Australia = AustraliaPage; 
Canada= CanadaPage;
tabsLoaded = false;

  ionViewDidLoad() {
    this.testservice.getCoutrynames().subscribe(countries => {
        this.tabs = countries;
          // below is the output data of getCoutrynames() method
          //      "countries": [
          //           {
          //           "country_id": 1,
          //           "countryName": "Canada"
          //           },
          //           {
          //           "country_id": 2,
          //           "countryName": "Australia"
          //           }
          //   ]
        this.tabsLoaded = true;
      })
  }
}

HTML :

 <super-tabs scrollTabs="true" *ngIf="tabsLoaded">
            <super-tab  *ngFor="let tab of tabs" [root]="tab.countryName"  title="tab.countryName"></super-tab>
 </super-tabs>

但是出现以下错误。

Runtime Error
Uncaught (in promise): invalid link: Australia

如有任何帮助，我们将不胜感激。

Answer 1

您正在将根设置为字符串 'Australia' 而不是 Australia object/page。做这样的事情：

pages = {
    Australia: AustraliaPage,
    Canada: CanadaPage,
    ...
};

<super-tabs scrollTabs="true" *ngIf="tabsLoaded">
            <super-tab  *ngFor="let tab of tabs" [root]="pages[tab.countryName]"  title="tab.countryName"></super-tab>
 </super-tabs>

使用 ionic2-super-tabs 标签的动态标签数量

Dynamic number of tabs using ionic2-super-tabs tag

ionic-framework

ionic2

ionic3