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

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()使用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;
          });
      });
  });
}