在 Angular 中执行 HTTP 请求时未显示加载微调器

Question

我正在使用 Angular 8 做一个 Web 应用程序，我想在执行 HTTP 请求时显示一个加载微调器。

我的实现没有显示加载微调器，我找不到原因。

服务

@Injectable()
export class UserService {

  // Caching
  private bsResource: BehaviorSubject<string[]> = new BehaviorSubject([]);
  private readonly resources$: Observable<string[]> = this.bsResource.asObservable();

  constructor(
    private http: HttpClient
  ) {
  }

  // Calling this method the loading spinner is not showing.
  getResources(): Observable<string[]> {
    if (this.bsResource.getValue().length === 0) {
      this.fetchResourceList().toPromise().then(res => this.bsResource.next(res));
    }

    return this.resources$;
  }

  // The loading spinner appears if I use this method directly and make this method public.
  private fetchResourceList(): Observable<string[]> {
    return this.http.get<string[]>('MY_URL');
  }
}

组件：

@Component({
  templateUrl: './create-new.component.html',
  styleUrls: ['./create-new.component.scss']
})
export class CreateNewComponent {
  resourceList$: Observable<string[]> = this.service.getResources();

  constructor(
    private service: UserService
  ) { }
}

模板

<div class="form-group">
  <label for="resourceSelect">* Resources</label>
  <div *ngIf="resourceList$ | async as resourceList; else loading">
     <ng-container *ngIf="resourceList.length; else noResults" >
        <div *ngFor="let r of resourceList; index as i">
          <!-- Show the result using checkboxes -->
        </div>
     </ng-container>
  </div>
</div>

<ng-template #loading>
  <br/>
  <div class="spinner-border spinner-border-sm text-muted" role="status">
    <span class="sr-only">Loading...</span>
  </div>
</ng-template>

<ng-template #noResults>
  <div class="text-muted">No results.</div>
</ng-template>

我不明白为什么使用this.service.getResources() 加载微调器没有显示，如果我使用this.service.fetchResourceList() 加载微调器显示正确。

我的目标是使用我提供的示例正确显示加载微调器，并保留我在组件中调用的方法。

Answer 1

我花了时间在沙箱中重现它，但最终发现问题来自您的BehaviorSubject的初始化。 bsResource 的第一个值是 []。所以在你的*ngIf 中，当管道async 订阅它时，它会收到[] 的值，这是真的，所以*ngIf 立即为真，并且永远不会触发else（加载）块。

你所要做的就是用一个空值初始化你的BehaviorSubject（然后使用它修复代码，以保证空值安全）：

private bsResource: BehaviorSubject<string[]> = new BehaviorSubject(null);

当你使用它时：

const cachedValue = this.bsResource.getValue();
if (!cachedValue || cachedValue.length === 0) {
  this.fetchResourceList().subscribe(res => this.bsResource.next(res));
}

我再说一遍，你不应该使用Promises，使用.subscribe，它的作用与toPromise().then相同。你永远不应该使用 Promise。 .toPromise 仅在升级 Angular 时有用，其中大部分代码使用 Promises，并且不想一次升级整个代码。