ОШИБКА TypeError: Невозможно прочитать свойство 'findIndex' из неопределенного в MatAutocomplete.displayFn [as 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;
}