Question

我有一个带搜索功能的Ionic 3应用程序。当应用搜索并且没有结果时，显示以下卡片：

  <ion-card *ngIf="pages?.length == 0" ng-cloak>
    <ion-card-content>
      No pages found...
    </ion-card-content>
  </ion-card>

但是当页面加载时，它会在屏幕上闪烁:( 所以我用ng-cloak来隐藏负载。我添加了这个CSS：

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

在app.scss

中

但是当页面加载时，离子卡在屏幕上闪烁......

Answer 1

Angular不支持ngCloak。你可以在angular -

中使用这种方法

<强> HTML

 <ion-card *ngIf="showNotFound">
    <ion-card-content>
      No pages found...
    </ion-card-content>
  </ion-card>

<强> TS

showNotFound: boolean = false

    search() {
        this.showNotFound = false;
        this.api.search(queryText).subscribe(data => {
                this.results = data;
                try {
                    if (!this.results.length) {
                        this.showNotFound = true;
                    }
                } catch (exception) {
                    console.error(exception);
                }
            }
        }

如何在Ionic 3 / Angular 2中使用ng-cloak？

1 个答案: