如何初始化mat-autocomplete为全量数据，点击表单控件时展示所有选项

你的核心问题是mat-autocomplete仅在输入后删除内容才会显示全量课程，需要调整逻辑让它在初始状态（输入框为空）和点击输入框时直接展示所有选项。

修改TS代码 #

将原本的filteredCourses方法改为Observable属性，并通过startWith操作符触发初始值的过滤逻辑：

// 先定义filteredCourses$为Observable类型（假设你的课程类型是Course）
filteredCourses$: Observable<Course[]>;

ngOnInit(): void {
  this.filteredCourses$ = this.personalFg.get('course').valueChanges.pipe(
    // 初始时传入空字符串，触发第一次过滤
    startWith(''),
    withLatestFrom(this.courses$),
    map(([value, courses]) => {
      // 输入值为空时直接返回全量课程
      if (!value) {
        return courses;
      }
      // 原有过滤逻辑（这里保留你自己的匹配规则）
      return courses.filter(course => {
        // 你的过滤条件，比如按名称模糊匹配
        return course.name.toLowerCase().includes(value.toLowerCase());
      });
    })
  );
}

修改HTML代码 #

1. 将模板中的filteredCourses改为filteredCourses$（对应TS中定义的Observable属性）
2. 给输入框添加点击事件，手动触发下拉框展开：

<form [formGroup]="personalFg">
  ...
  <input matInput required 
         formControlName="course" 
         [matAutocomplete]="coursesAutoComplete"
         (click)="coursesAutoComplete.open()">
  
  <mat-autocomplete autoActiveFirstOption #coursesAutoComplete="matAutocomplete">
    <mat-option *ngFor="let option of filteredCourses$ | async" [value]="option.name">
      <div fxLayout="column">
        ...
      </div>
    </mat-option>
  </mat-autocomplete>
  ...
</form>

逻辑说明 #

• startWith('')确保valueChanges流在组件初始化时就发出空值，触发第一次过滤，直接返回全量课程数据。
• 当输入框为空（包括初始状态和用户清空内容），过滤逻辑会返回所有课程，满足点击输入框即展示全量选项的需求。
• 点击输入框时调用coursesAutoComplete.open()，强制下拉框展开，避免因Angular表单状态未变化导致的下拉不显示问题。

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