正在使用ngIf和异步管道加载占位符？

Question

在我的Angular应用程序中，我有一个<form>和一个<select>字段，其选项是在运行时从服务器获取的。在HTTP请求待处理期间，我使用ngIf / else显示了一个加载图标的占位符：

<div class="form-group row">
    <label for="nameInput" class="col-3 col-form-label-sm">Name</label>
    <div class="col">
        <select *ngIf="(listOfNames$ | async) as listOfNames; else loading" 
            id="nameInput" class="form-control form-control-sm" formControlName="name">
            <option *ngFor="let option of listOfNames" [value]="option">{{ option }}</option>
        </select>
    </div>
</div>

<ng-template #loading>
    <div class="form-control form-control-sm">
        <div class="loading-spinner-anim"></div>     
    </div>
</ng-template>

这很好用 ，除了Observable listOfNames$解析为空数组是一种常见的用例之外，发生这种情况时它会显示#loading模板是无限期的，因为在*ngIf指令中，一个空数组是 falsy ，因此会呈现 else 。

如何Observable listOfNames$未完成时如何重写显示“正在加载”，如果解析为空数组，则显示其他内容？

谢谢！