Angular搜索页面中未定义数组的三种状态处理方案咨询

嘿，我来帮你搞定这个Angular搜索页面的状态切换问题！你的核心需求是区分三种状态：未搜索时啥也不显示、搜索后无结果显示提示、有结果就循环渲染，而且想让results初始为undefined，搜索后再赋值——这个思路完全没问题，之前逻辑失效主要是因为直接访问undefined的length属性导致的，咱们来调整下模板结构就行。

方案一：嵌套*ngIf+ng-template（最直观） #

这个方案通过两层ngIf来区分三种状态，完美匹配你的需求：

<!-- 第一层：判断是否执行过搜索（results是否已赋值） -->
<ng-container *ngIf="results; else notSearched">
  <!-- 第二层：判断搜索结果是否为空 -->
  <ng-container *ngIf="results.length; else noResults">
    <!-- 有结果时循环渲染 -->
    <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>

<!-- 搜索后无结果的提示模板 -->
<ng-template #noResults>
  No Results dude.
</ng-template>

<!-- 未搜索时的空模板（啥也不显示） -->
<ng-template #notSearched></ng-template>

逻辑说明：

1. 未搜索状态：results是undefined，触发else notSearched，对应的模板是空的，所以页面啥也不显示；
2. 搜索后无结果：results已经被赋值为空数组[]，第一层ngIf通过，第二层ngIf因为length=0触发else noResults，显示提示文本；
3. 搜索后有结果：两层ngIf都通过，正常循环渲染结果列表。

方案二：用ngSwitch实现（适合状态较多的场景） #

如果你更倾向用ngSwitch，可以这样写，把三种状态明确区分开：

<ng-container [ngSwitch]="true">
  <!-- 未搜索：results为undefined -->
  <ng-container *ngSwitchCase="results === undefined"></ng-container>

  <!-- 搜索后空数组 -->
  <ng-container *ngSwitchCase="results.length === 0">
    No Results dude.
  </ng-container>

  <!-- 搜索后有结果（默认分支） -->
  <ng-container *ngSwitchDefault>
    <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>

这里把ngSwitch绑定到true，每个ngSwitchCase直接判断状态条件，逻辑同样清晰。

为什么之前的代码失效？ #

你之前直接用*ngIf="results.length"，当results是undefined时，Angular会尝试读取undefined.length，直接抛出错误，导致整个模板逻辑异常。必须先判断results是否存在（即是否执行过搜索），再去检查它的长度，这样才不会出错。

内容的提问来源于stack exchange，提问作者michael