ionic-super-tabs工具栏不适用于动态数据

Question

我目前正在处理ionc4应用程序，我需要使用this插件才能在标签之间滑动。当我使用静态数据时，插件的工具栏可以正常工作。但是，每当我通过服务器获取数据时，它都会停止显示工具栏（选项卡）部分。另一方面，它显示所有选项卡的内容。值得一提的是，我使用的是最新版本的 ionic-super-tabs / angular”：“ ^ 6.0.0-beta.8

静态数据：HTML端，并且有效

<ion-header>
 <ion-toolbar>
   <ion-title>NextOrderPage</ion-title>
 </ion-toolbar>
</ion-header>

<ion-content>
 <super-tabs (tabChange)="onTabChange($event)">
   <super-tabs-container >
     <super-tab>
       <h1>Home Content</h1>
     </super-tab>
     <super-tab>
       <h1>About Content</h1>
     </super-tab>
     <super-tab>
       <h1>Setting Content</h1>
     </super-tab>
   </super-tabs-container>
   <super-tabs-toolbar slot="top">
     <super-tab-button>
       <ion-label>Home</ion-label>
     </super-tab-button>
     <super-tab-button>
       <ion-label>About</ion-label>
     </super-tab-button>
     <super-tab-button>
       <ion-label>Setting</ion-label>
     </super-tab-button>
   </super-tabs-toolbar>
 </super-tabs>
</ion-content>

静态数据：打字机端并且有效

import { Component, OnInit, ViewChild } from "@angular/core";
import { SuperTabs } from "@ionic-super-tabs/angular";
@Component({
 selector: "app-next-order-page",
 templateUrl: "./next-order-page.page.html",
 styleUrls: ["./next-order-page.page.scss"]
})
export class NextOrderPagePage implements OnInit {
 @ViewChild(SuperTabs) superTabs: SuperTabs;
 constructor() {}
 ngOnInit() {}
}

动态数据部分 HTML文件动态数据

<ion-header>
 <ion-toolbar>
   <ion-title>NextOrderPage</ion-title>
 </ion-toolbar>
</ion-header>

<ion-content>
 <div class="content">
   <div class="menu">
     مینو
   </div>
   <div class="category">
     <super-tabs>
       <super-tabs-container>
         <super-tab *ngFor="let item of categories">
           <div class="item" *ngFor="let food of SingleRestaurantData[item]">
             <ion-grid>
               <ion-row>
                 <ion-col size="8">
                   <div class="food-info">
                     <div class="food-name">{{ food[1] }}</div>
                     <div class="food-description">
                       {{ food[3] }}
                     </div>
                     <div class="price">افغانی {{ food[2] }}</div>
                     <div class="order">
                       <fa-icon
                         icon="plus-circle"
                         (click)="addorders(food[0])"
                         id="{{ food[0] }}up"
                       ></fa-icon>
                       <span class="order-count" id="{{ food[0] }}span"
                         >0</span
                       >
                       <fa-icon
                         icon="minus-circle"
                         id="{{ food[0] }}down"
                         (click)="minusOrder(food[0])"
                       ></fa-icon>
                     </div>
                   </div>
                   <!--end of food-info section-->
                 </ion-col>
                 <ion-col size="4">
                   <div
                     class="food-image"
                     [ngStyle]="{ 'background-image': 'url(' + food[4] + ')' }"
                   ></div>
                 </ion-col>
               </ion-row>
             </ion-grid>
           </div>
           <!--end of div.item-->
         </super-tab>
       </super-tabs-container>
       <super-tabs-toolbar slot="top" scrollable="true">
         <super-tab-button *ngFor="let item of categories">
           <ion-label>{{ item }}</ion-label>
         </super-tab-button>
       </super-tabs-toolbar>
     </super-tabs>
   </div>
   <!--end of category-->
   <div class="food-list"></div>
 </div>
</ion-content>

打字稿文件动态数据

 import { AlertService } from "./../../../services/alert/alert.service";
    import { Component, OnInit, ViewChild } from "@angular/core";
    import { SuperTabs } from "@ionic-super-tabs/angular";
    import { Storage } from "@ionic/storage";
    import { SingletonService } from "src/app/services/constants/single-ton.service";
    import { HTTP } from "@ionic-native/http/ngx";
    import { Router, ActivatedRoute } from "@angular/router";
    @Component({
     selector: "app-next-order-page",
     templateUrl: "./next-order-page.page.html",
     styleUrls: ["./next-order-page.page.scss"]
    })
    export class NextOrderPagePage implements OnInit {
     userId: number;
     restaurantId: number;
     SingleRestaurantData: any;
     restaurantInfo: any;
     categories: any;
     isFavorite: boolean = false;
     unFavorite: boolean = true;
     addorder: boolean = false;
     count: boolean = false;
     // restaurant_id: number;
     favorite = false;
     @ViewChild(SuperTabs) superTabs: SuperTabs;
     constructor(
       public storage: Storage,
       public http: HTTP,
       public router: Router,
       private route: ActivatedRoute,
       private loading: AlertService
     ) {
       this.route.queryParams.subscribe(params => {
         if (this.router.getCurrentNavigation().extras.state) {
           this.restaurantId = this.router.getCurrentNavigation().extras.state.restaurant_id;
         }
       });
       this.storage.get("user_data").then(data => {
         this.userId = data[0];
         console.log(this.userId);
         data = { user_id: this.userId, restaurant_id: this.restaurantId };
         this.http
           .post(SingletonService.SinglePageRestaurant, data, {})
           .then(SingleData => {
             this.SingleRestaurantData = JSON.parse(SingleData.data);
             this.restaurantInfo = this.SingleRestaurantData.restaurant_info;
             delete this.SingleRestaurantData.restaurant_info;
             this.categories = this.keys(this.SingleRestaurantData);
             console.log(this.SingleRestaurantData[this.categories[0]]);
             //check the favorite res
             if (this.restaurantInfo[0][9] == "true") {
               this.isFavorite = true;
               this.unFavorite = false;
             }
             this.loading.dismiss();
           })
           .catch(error => {
             console.log("error happended while geting resturant data");
             console.log(error.status);
             console.log(error.error);
             console.log(error.headers);
           });
       });
       //take the restaurant id with the route
     }
     keys(obj) {
       return Object.keys(obj);
     }
     ngOnInit() {}
    }

注意：我已经提供了上述文件，如果需要添加更多代码，请告诉我。 显示此错误