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

我正在为应用程序搜索屏幕。我认为在结果部分中有三个结果。


如果用户未尝试搜索，则什么也不显示。
如果用户尝试搜索并且数组为空，则显示“无结果”。
如果用户尝试搜索并且数组不为空，则循环并显示结果。


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

<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，但是我宁愿让我的数组以未定义的形式开始，然后在第一次搜索后分配。

最佳答案

这应该涵盖您的三个结果。假设结果为null或默认情况下未定义，我们首先检查它是否退出。如果有，请检查它是否具有任何值。如果用户尚未搜索，则* ngIf将返回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 - 如何为不同的模板处理Angular中未定义的数组？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/60453795/