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

Question

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

• 如果用户未尝试搜索，则不显示任何内容。
• 如果用户尝试搜索且数组为空，则显示“无结果”。
• 如果用户尝试搜索并且数组不为空，则循环并显示结果。

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

<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>

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

Answer 1

这应该涵盖您的三个结果。假设默认情况下 results 为 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>