如何处理 Angular 中不同模板的未定义数组？

Question

我正在处理应用程序的搜索屏幕。我想在结果部分有三个结果。

如果用户没有尝试搜索，则不显示任何内容。
如果用户尝试搜索但数组为空，则显示 "no results"。
如果用户尝试搜索并且数组不为空，则循环并显示结果。

我可以让空与非空工作得很好：

<ng-container *ngIf="results.length">
    <div class="result" *ngFor="let result of results">
        <a href="link-goes-here">Open Result</a>
        <search-result  [result]="result"></search-result>
    </div>
</ng-container>
<ng-container #elseBlock>
    No Results dude.
</ng-container>

但是，当我尝试混合检查 results 是否为 undefined 时，它似乎无法正常工作。我尝试使用 [ngSwitch]，但这似乎也不起作用。我可以只创建一个布尔变量，它一开始是 false，然后在执行搜索后设置为 true，但我宁愿让我的数组以未定义开始，然后在第一次搜索后被分配。

Answer 1

您需要使用安全导航运算符 ?. 以防结果为空或未定义 elseBlock 可见

<ng-container *ngIf="results?.length;else elseBlock">
    <div class="result" *ngFor="let result of results">
        <a href="link-goes-here">Open Result</a>
        <search-result  [result]="result"></search-result>
    </div>
</ng-container>

<ng-template #elseBlock>
    No Results dude.
</ng-template>

Answer 2

这应该涵盖您的三个结果。假设 results 默认为 null 或 undefined，我们首先检查它是否存在。如果是，请检查它是否有任何值。如果用户尚未搜索，则 *ngIf 将 return false 并且不会呈现任何内容。

<ng-container *ngIf="results">
    <ng-container *ngIf="results.length > 0; else elseBlock >
       <div class="result" *ngFor="let result of results">
          <a href="link-goes-here">Open Result</a>
          <search-result  [result]="result"></search-result>
       </div>
    </ng-container>

    <ng-template #elseBlock>
        No Results dude.
    </ng-template>

</ng-container>

如何处理 Angular 中不同模板的未定义数组？

How to handle undefined arrays in Angular for different templates?

undefined

typescript

angular-template

angular-ng-if

angular