Angular 角度6材质：材质自动完成显示，不显示选定对象

我有一个自动完成列表框。问题是当我从列表框中选择任何选项时，它不会在输入框中显示任何内容

  <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>

{{directions.name}

下面是.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);
 }

/.ts文件
导出常量方向列表：数组

但是在选择时，我没有得到显示名称


也没有控制台日志错误。
我错过了一些东西

Env:angular6，TS 2.7.2，material 6.2.0
函数的参数是使用选项的
值设置的对象或变量。在本例中，您将
“directions.value
设置为选项值，但应为directions对象本身。改变这个。简单的解决方案是使用
[value]=“directions”
，但是您可能需要更改表单的工作方式，因为表单控件值现在将是相同的对象，而不是值成员