Угловое / автозаполнение материала: параметры не отображаются

Question

Угловая версия: 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.Есть идеи, что здесь может происходить?

Answer 1

Так что я здесь не эксперт, но из того, что я понимаю, функция автозаполнения требует заметных сортов, по крайней мере, если вы хотите иметь возможность фильтровать результаты по мере ввода, чтобы быть выбранными.Поскольку вы используете массив, вам нужно сначала превратить его в наблюдаемый.Поскольку ваш массив загружается немедленно, вам нужно будет использовать темы 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>