Question

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中。有什么想法可以在这里发生吗？

Answer 1

因此，我不是专家，但是据我了解，自动完成功能需要一种可观察的排序方式，至少如果您希望能够在键入时筛选出结果，就必须将其选中。由于您正在使用数组，因此需要首先将其变为可观察的数组。当您的数组被立即加载时，您将需要使用RXJS的主题，尤其是BehaviorSubject。一旦它成为可观察的对象，则可以使用表单上的asyncpipe对其进行调用。这并不是说您无法使用数组完成此操作并且未使用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>

角度/材质自动完成：选项不呈现

1 个答案: