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

时间:2017-07-28 10:30:01

标签: ionic-framework ionic2 ionic3

我的应用页面中没有固定数量的标签,因此在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

非常感谢任何帮助。

1 个答案:

答案 0 :(得分:1)

您将根设置为字符串-84而不是'Australia'对象/页面。做这样的事情:

Australia