角度/材料自动完成：选项不呈现答案

【问题标题】：Angular/material autocomplete: options do not render角度/材料自动完成：选项不呈现
【发布时间】：2018-10-20 05:14:20
【问题描述】：

Angular 版本：5.0.0 角度/材质版本：5.2.4

我有这个表格：

<form #updateForm="ngForm">
 <mat-form-field>
  <input type="text" matInput [formControl]="studentFormControl [matAutocomplete]="auto">
  <mat-autocomplete #auto="matAutocomplete">
   <mat-option *ngFor="let student of students" [value]="student">
    {{student}}
   </mat-option>
  </mat-autocomplete>
 </mat-form-field>
</form>

我有这个组件：

import { FormGroup, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms'; 
import { MatInputModule, MatAutocompleteModule, MatFormFieldModule } from '@angular/material';
export class DashboardComponent implements OnInit {
  this.studentFormControl = new FormControl();
  this.students = ['hi', 'hello'];
...
}

虽然显示了表单，但自动完成框保持无量纲，没有在其中呈现选项： screenshot of input/autocomplete box

还应注意，表单嵌套在 ngbModal 中。有什么想法可以在这里发生吗？

【问题讨论】：

您是否遇到任何错误？您的代码运行良好。
我没有收到任何错误，但没有任何显示。自动完成元素只有一个注释

标签： autocomplete material-design angular-material angular5

【解决方案1】：

所以我在这里不是专家，但据我了解，自动完成功能需要一种可观察的类型，至少如果您希望能够在键入时过滤结果，则可以选择它。由于您使用的是数组，因此您需要先将其转换为 observable。当您的数组立即加载时，您需要使用 RXJS 的主题，更具体地说是 BehaviorSubject。一旦它成为可观察的，您就可以使用表单上的异步管道调用它。这并不是说您不能使用数组来完成它并且不使用 asyncPipe，但是该数组必须在 OnInit 中加载。请参阅两者的示例

import { Observable, from, Subscription, BehaviorSubject } from 'rxjs';
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatInputModule, MatAutocompleteModule, MatFormFieldModule } from '@angular/material';


@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
  studentFormControl = new FormControl();
  studentFormControl1 = new FormControl();
  array = ['test','one','two'];
  array1=[];
  arrayObs: Observable<any>;
  arrayBehObs = new BehaviorSubject(this.array);
  constructor() { }

  ngOnInit() {
    
    this.array1.push('test','one','two');
    this.arrayObs = this.returnAsObs();

  }
  private returnAsObs() {
    return this.arrayBehObs.asObservable();
  }

}

<form #updateForm="ngForm">
        <input type="text" matInput [formControl]="studentFormControl" [matAutocomplete]="auto">
        <mat-autocomplete #auto="matAutocomplete">
            <mat-option *ngFor="let student of arrayObs|async" [value]="student">
                {{student}}
               </mat-option>
        </mat-autocomplete>

            <input type="text" matInput [formControl]="studentFormControl1" [matAutocomplete]="auto1">
            <mat-autocomplete #auto1="matAutocomplete">
                <mat-option *ngFor="let student of array1" [value]="student">
                    {{student}}
                   </mat-option>
            </mat-autocomplete>



</form>

【讨论】：