单击后端时如何加载角材料自动完成（如下拉）

Question

我是棱角材料的新手。我尝试使用后端加载自动完成功能，当我单击此自动完成功能时，我想加载相关的值（例如下拉列表）。该自动完成文本字段根据mat下拉列表加载。当我单击名称时，我想在后端加载所有名称。但是当我单击下拉值时，它不会将值加载到自动完成

这是我的HTML代码

<div fxLayout="row">
 <mat-form-field>
<mat-select placeholder="Search Occupation By" name="occuSearch" 
(selectionChange)="occupationSearchChangeAction(occuSearch)" 
[(ngModel)]='occuSearch'>
  <mat-option *ngFor="let occup of occupList " 
  [value]="occup.occupSearch" >{{ occup.occupSearch }}</mat- 
option>
</mat-select>
</mat-form-field>

<div class="form-group">
<form class="occupation-form" [formGroup]="occupationForm">
  <mat-form-field class="example-full-width">
    <input matInput formControlName="searchField" 
(keyup)="applyFilter($event.target.value)" type="text" 
placeholder="Search Value" aria-label="Number" 
  [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let occupationsearchdto of 
 filteredOptions | async" [value]="occupationsearchdto">
        {{occupationsearchdto}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>
</div>

这是我的ts文件

export class OccupationComponent implements OnInit {

occuSearch;
// occuValue;
// occValueList1 = [];
type1 = 'Name';
filteredOptions: Observable<string[]>;
// filteredOptions: OccupationSearchDto[] = [];
occupationAutocomplete: Array<Occupationdto> = [];
occupationdto: Occupationdto = new Occupationdto();
options: string[] = [];

occupList: any = [
{
'occupSearch': 'Name',
options: [this.occupationdto.name]
},
{
'occupSearch': 'Code',
options: [this.occupationdto.code]
},
{
'occupSearch': 'S_name',
options: [this.occupationdto.sName]
}
];

// form group text field

occupationForm = new FormGroup({
searchField: new FormControl('')
});

get searchField() {
return this.occupationForm.get('searchField');
}
occupationSearchList: Array<OccupationSearchDto> = [];
occupationSearchNow: OccupationSearchDto = new 
OccupationSearchDto();
manually = false;


constructor(private occupationService: OccupationService) {
}

ngOnInit() {
this.filterdeOptions();
this.loadAllSearchData();
this.loadOccupationGetAll();
}

filterdeOptions() {
this.filteredOptions = this.searchField.valueChanges.pipe(
  startWith(''),
  map(value => this._filter(value))
);
}

// autocomplete getAll

loadOccupationGetAll(): void {
this.occupationService.autoCompleteLoadAll().subscribe(
  (result) => {
    this.occupationAutocomplete = result;
    console.log(this.occupationAutocomplete);

    for (this.occupationdto of this.occupationAutocomplete) {
      // tslint:disable-next-line:no-unused-expression
      this.occupationdto.code;
      // tslint:disable-next-line:no-unused-expression
      this.occupationdto.name;
      // tslint:disable-next-line:no-unused-expression
      this.occupationdto.sName;
    }
    console.log('autocompleteLoading   ' + 
    this.occupationdto.code);
    }
    );
    }



    // typing search

    applyFilter(filterValue: string): void {

    console.log('filtered value    ' + filterValue);
    console.log(this.type1);

    if (this.searchField.value.length >= 3) {
    this.occupationService.searchOccupation(filterValue, 
    this.type1).subscribe(
    (result) => {
    console.log('occupation search by textfield' + 
    this.occupationSearchNow);
    this.occupationSearchNow = result;
    this.filterdeOptions();
    console.log('new OccupationsearchDto' + 
    this.occupationSearchNow);
    }
    );
    }
    }

    private _filter(value: string): string[] {
    const filterValue = value.toLowerCase();
    return this.options.filter(option => 
    option.toLowerCase().indexOf(filterValue) === 0);
    }




    // auto complete dropdown making

    occupationSearchChangeAction(occup) {
    this.type1 = occup;
    console.log(this.type1 );

    // tslint:disable-next-line:prefer-const
    let dropDownData = this.occupList.find((data: any) => 
    data.occupSearch === occup);
    if (dropDownData) {
    this.options = dropDownData.options;
    }
    }

那么我如何根据后端加载自动完成功能？？