错误TypeError：无法读取MatAutocomplete.displayFn中未定义的属性'findIndex'[作为displayWith]

Question

我正在尝试在项目中实现mat-autocomplete。我有codevalue要显示，codename要发回服务器。当我选择一个选项但我的displayWith函数未访问该函数之外的数组时，我正在使用自动完成的codevalue函数来显示displaywith。它显示为未定义。

我的html文件：

<mat-form-field class="col-12 col-sm-6 ">
    <mat-label class="padding">Item Name</mat-label>
    <input matInput formControlName="itemName" [matAutocomplete]="auto" style="padding-left: 10px;">
    <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
        <mat-option *ngFor="let list of filteredOptions | async" [value]="list.codename">
            {{list.codevalue}}
        </mat-option>
    </mat-autocomplete>
    <input matInput formControlName="seq" required style="padding-left: 10px;" style="display: none;">
</mat-form-field>

我的ts文件：

ngOnInit()
{
    this.inventory.getInvDropdown().subscribe(
        data => {

            this.materialList = data['materials'];
            // tslint:disable-next-line:no-string-literal
            this.display = data['materials'];
            this.clone = [].concat(this.display);
            console.log(this.materialList);
        }
    );
    this.formBuilderOnDemand();
    this.filter();
}
filter()
{
    this.filteredOptions = this.addInventoryForm.get('itemName').valueChanges
        .pipe(
            startWith(''),
            map(value => this._filter(value))
        );
}

private
_filter(value
:
any
):
any[]
{
    const filterValue = value.toLowerCase();

    if (!this.materialList) return this.materialList;
    return this.materialList.filter(list => list.codevalue.toLowerCase().includes(filterValue));
}

displayFn(mList)
{
    console.log(mList);
    console.log(this.materialList);
    if (!mList) return '';
    let index = this.materialList.findIndex(list => list.codename === mList); //>>errror line of code: undefined..console of material List is showing as undefined
    console.log('index', index);
    return this.materialList[index].codevalue;
}