Question

我想根据用户的位置建议用户。

我必须处理案件：

用户授予了地理位置服务
用户未授予地理位置服务

我想显示加载消息，同时我正在检查地理定位服务是否被授予，以及（如果是），同时寻找机构。

我试过这样的事情：

<div *ngIf="(suggestedPlaces$ | async) || clocationAvailable !== undefined; else loading" >
      <div *ngFor="let place of suggestedPlaces$ | async">
        <ion-card (click)="onSuggestedPlaceSelected(place)">
          <!--<ion-img width="2OO" height="200" src="{{place.photo}}">
        </ion-img>-->
          <ion-card-content>
            <ion-card-title>
              {{place.name}} - {{place.rating}}
            </ion-card-title>
            <p>
              {{place.vicinity}}
            </p>
          </ion-card-content>
        </ion-card>
      </div>
    </div>

    <div #loading padding text-center>
        <ion-spinner></ion-spinner>
        <p>
          Chargement...
        </p>
    </div>

    <div *ngIf="clocationAvailable === false" class="message-box message-box-alert">
      <ion-row>
          <ion-col col-1>
            <ion-icon name="alert"></ion-icon>
          </ion-col>
          <ion-col>
            Could not geolocate you
          </ion-col>
        </ion-row>
    </div>

在我的控制器中，我写了以下内容：

clocationAvailable: boolean;

ionViewDidLoad() {
    // Start to geolocate the user in order to suggest accurate places
    this.geolocation.getCurrentPosition().then((resp) => {
      // resp.coords.latitude
      // resp.coords.longitude
      console.log('Location ', resp);

      // Trigger searchSuggestionsForSport()
      // Will populate the suggestedPlaces$ variable
      this.clocationAvailable = true;
      this.searchSuggestionsForSport(this.sport);

    }).catch((error) => {
      console.log('Error getting location', error);

      // Set clocationAvailable to false which means that the user could not be geolocated (certainly because not granted)
      // This is used in view to display a message
      this.clocationAvailable = false;
    });
  }

我的问题是，当我发现地理位置错误并且我将clocationAvailable设置为false时，我的错误消息很好地显示但旋转器仍然存在。

我怎么能处理这个？

Answer 1

您可以使用变量来查看加载程序。

<div *ngIf="loadingInProgress" #loading padding text-center></div>

控制器

loadingInProgress: boolean = true; //loading in the begining

ionViewDidLoad() {
//stuff as before
.catch((error) => {
    console.log('Error getting location', error);

    this.loadingInProgress = false; //Changed visibility
});

}

修改

如果您想使用 else 语句，则需要使用 ng-template

<ng-template #loading>
    <div padding text-center>
        <ion-spinner></ion-spinner>
        <p>
            Chargement...
        </p>
    </div>
</ng-template>

使用* ngIf else处理三重条件

1 个答案:

修改