Question

在我的情况下，我有一个离子页面显示不同模板中的选定项目。对于每个项目类型，我有设置对象，可以在选择项目后使用ngOnint从服务器获取，我渲染html取决于这些设置。例如，我使用* ngIf显示/隐藏一些组件。

问题出在html文件中，设置对象未定义如何在渲染html之前获取设置对象。注意：我正在使用servicestack Web服务。

      <div class="user-details">
        <ion-segment class="user-content-segment" [(ngModel)]="display">
            <ion-segment-button value="description">
                Açıklama
            </ion-segment-button>

            <ion-segment-button *ngIf="settings.Commmon.UseMenuList" value="prices">
                Fiyatlar
            </ion-segment-button>
            <ion-segment-button value="location">
                Konum
            </ion-segment-button>
            <ion-segment-button value="reviews">
                Yorumlar
            </ion-segment-button>
        </ion-segment>
    </div>

ts文件

constructor(public navCtrl: NavController,
            public navParams: NavParams, private postApi: PostAPI,
            public loadingCtrl: LoadingController, public alerCtrl: AlertController) {
    this.loading = this.loadingCtrl.create();
    this.post = navParams.get('post');
}

ngOnInit() {
    this.postApi.GetPostTypeSetting(this.post.PostTypeId).then(res => {
        this.settings = res;
        console.log(res);
    });
    this.postApi.GetPostDetail(this.post.PostId).then(res => {
        this.postDetail = res;
        console.log(res);
    });

    this.postApi.GetCategoryDetail(1, 1).then(res2 => {

    });

}

Answer 1

您需要为变量定义标准值。 *ngIf会不断检查情况是否发生了变化。所以你定义这样的东西：

public settings: object = {
    Common: {
        UseMenuList: false
    }
};

目前您收到错误，因为您尝试访问未定义的变量，因为您的api请求是异步的。所以只需定义一个默认值（无论是真还是假），你就可以了。

Answer 2

在Ionic中，您可以使用ionViewWillEnter()功能

Answer 3

您正在寻找的是 ionViewCanEnter（）

在视图可以进入之前运行。这可以在经过身份验证的视图中用作一种“保护”，您需要在视图可以进入之前检查权限

https://ionicframework.com/docs/api/navigation/NavController/

ionViewCanEnter(): boolean {

  this.postApi.GetPostTypeSetting(this.post.PostTypeId).then(res => {
      this.settings = res;
      console.log(res);

      this.postApi.GetPostDetail(this.post.PostId).then(res2 => {
          this.postDetail = res2;
          console.log(res2);

          this.postApi.GetCategoryDetail(1, 1).then(res3 => {
               console.log(res3);
               return true;
          });
      });
  });
}

如何在Ionic 2/3中呈现html页面之前从url promise中加载数据？

3 个答案: