时间戳

首页 > 解决方案 > 角度/材料自动完成：选项不呈现

autocomplete - 角度/材料自动完成：选项不呈现

问题描述

角度版本：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'];
...
}

尽管显示了表单，但自动完成框仍然是无量纲的，其中没有呈现选项： 输入/自动完成框的屏幕截图

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

标签： autocompletematerial-designangular-materialangular5

解决方案

所以我在这里不是专家，但据我了解，自动完成功能需要一种可观察的类型，至少如果您希望能够在键入时过滤结果，以便被选中。由于您使用的是数组，因此您需要先将其转换为 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>

推荐阅读