Angular6 material: mat autocomplete displayWith 不显示所选对象

Question

我有一个 mat-autocomplete 列表框。问题是当我 select 列表框中的任何选项时，它不会在输入框中显示任何内容。

  <form [formGroup]="SForm" id="Form" style="width:100%;height:70%" (ngSubmit)="onSubmit()">
      <mat-form-field>
    <input type="text" placeholder="Direction" aria-label="Assignee"  formControlName="direction" matInput [matAutocomplete]="auto">
     <mat-autocomplete #auto="matAutocomplete" placeholder="Direction" 
     [displayWith]="displayFn">
    <mat-option *ngFor="let directions of filteredDirectionList | async" 
    [value]="directions.value">{{directions.name}}</mat-option>                                            
    </mat-autocomplete>
    </mat-form-field>                       
    </form>

下面是.ts文件

// .ts file

   export const directionList: Array<any> = [{ name: 'Inbound', value: 'I' 
  }, { name: 'Outbound', value: 'O' }];

 ngOnInit() {
  this.SForm= this.formBuilder.group({
  direction: [null],
   });
       this.filterLists();
  }

 displayFn(direction?: any) : string | undefined {
return direction ? direction.name : undefined;;
}

 filterLists() {
this.filteredDirectionList = 
 this.SForm.controls.direction.valueChanges.pipe(
  startWith<string | any>(''),
  map(value => typeof value === 'string' ? value : value.name),
  map(name => name ? this._filter(name, directionList) : 
 this.directionList.slice())
  );
 }

 private _filter(name: string, lists: any[]): any[] {
const filterValue = name.toLowerCase();

return lists.filter(option => option.name.toLowerCase().indexOf(filterValue) 
 === 0);
 }

下面是显示的自动完成列表框

但是在 selection 上我没有得到显示名称。

也没有控制台日志错误。我缺少的东西。

环境：angular6，TS 2.7.2，material6.2.0

Answer 1

displayWith 函数的参数是使用选项的 value 输入设置的对象或变量。在您的情况下，您将 'directions.value 设置为选项值，但期望方向对象本身。改变那个。简单的解决方案是使用 [value]="directions" 但随后您可能需要更改表单的工作方式，因为表单控件值现在将是同一个对象而不是值成员。

Angular6 material: mat autocomplete displayWith 不显示所选对象

Angular6 material: mat autocomplete displayWith doesnt display selected object

autocomplete

angular-material2

angular

angular-reactive-forms