Angular 4+Angular CLI：空课程列表时显示提示信息的实现

嘿，我来帮你搞定这个空列表提示的问题～ 在Angular里处理空状态其实很简单，核心思路就是判断课程数组的长度，当数组为空时展示提示文本。这里给你两种常用的实现方式，你可以根据自己的代码结构选择：

方法1：直接在列表末尾添加空状态项 #

这种方式最直接，不用额外的模板容器，适合简单场景：

<!-- 假设你的列表外层是ul -->
<ul>
  <!-- 遍历已完成课程的现有代码 -->
  <li class="search-resultsult" *ngFor="let a of classesS">
    <div class="col col-medium">
      <div class="col col-1of2">
        <a href="#/" (click)="Play(a)">
          <i class="ico-mic"></i>
        </a>
      </div>
      <!-- 这里补全你原来的其他课程内容 -->
    </div>
  </li>

  <!-- 空状态提示 -->
  <li *ngIf="classesS.length === 0" class="empty-course-tip">
    暂无已完成课程
  </li>
</ul>

方法2：用ng-container和else模板（更优雅） #

如果不想在列表里混进一个逻辑上不属于“列表项”的提示，或者需要更复杂的空状态UI，推荐用这种方式——ng-container不会生成额外DOM元素，保持结构整洁：

<ul>
  <ng-container *ngIf="classesS.length > 0; else emptyCourseTemplate">
    <!-- 遍历已完成课程的现有代码 -->
    <li class="search-resultsult" *ngFor="let a of classesS">
      <div class="col col-medium">
        <div class="col col-1of2">
          <a href="#/" (click)="Play(a)">
            <i class="ico-mic"></i>
          </a>
        </div>
        <!-- 这里补全你原来的其他课程内容 -->
      </div>
    </li>
  </ng-container>

  <!-- 定义空状态模板 -->
  <ng-template #emptyCourseTemplate>
    <li class="empty-course-tip">暂无已完成课程</li>
    <!-- 你还可以在这里加图标、按钮等更丰富的空状态内容 -->
  </ng-template>
</ul>

额外优化建议 #

1. 确保数组初始化：在组件的TS文件里，记得把classesS初始化为空数组，避免undefined导致length报错：

// 你的组件.ts文件
classesS: Course[] = []; // 用你的课程类型替换Course

2. 美化空状态样式：给提示加一点CSS，让它更友好：

.empty-course-tip {
  text-align: center;
  padding: 30px 0;
  color: #888;
  font-style: italic;
}

这样就能完美实现“有课程显示列表，无课程显示提示”的需求啦～

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