Angular 7 ОШИБКА TypeError: Невозможно прочитать свойство 'pipe' из неопределенного - PullRequest
Новая
       20

Angular 7 ОШИБКА TypeError: Невозможно прочитать свойство 'pipe' из неопределенного

0 голосов
/ 11 февраля 2020

Привет, я очень новичок в angular пытался реализовать автозаполнение с помощью пользовательских фильтров, получал эту ошибку, связанную с тем, что pipe не смог найти решение за последние 3 дня .. Может кто-нибудь, пожалуйста, помогите мне с этим 

<mat-form-field class="col-12 col-sm-6">
    <mat-label class="padding">Units</mat-label>
    <mat-select formControlName="unit" [(value)]="selected"  required style="padding-left: 10px;">
        <mat-option *ngFor="let list of unitsList | async" [value]="list.codename">{{list.codevalue}}</mat-option>
    </mat-select>
    <mat-error *ngIf="getvalue1.unit.errors">{{getunitErrorMessage()}}</mat-error>
</mat-form-field>

мой файл TS: 

 ngOnInit() {
    //
    this.projectservice.getInventoryProjectsList().subscribe(
      data => {
       this.projectsList2 = data;
      }
    );

    // for inventory dropdown
    this.inventory.getInvDropdown().subscribe(
      data => {

        this.unitsList = data['units'];
        console.log(this.unitsList);
        // tslint:disable-next-line:no-string-literal

      }
    );
    this.formBuilderOnDemand();
    this.filter();

  }
  // // for filter
  filter() {
    this.filteredOptions = this.addInventoryForm.value.itemName.valueChanges
    .pipe(    // Error line 
      startWith(''),
      map(value => this._filter(value))
    );
  }

  // for search in item name
  private _filter(value: any): any[] {
    const filterValue = value.toLowerCase();
    return this.materialList.filter(list => list.toLowerCase().includes(filterValue));
  }

Ответы [ 3 ]

1 голос
/ 11 февраля 2020

Вы используете unitsList | async на вашем HTML, но unitsList уже является массивом, async pipe предназначен для использования на асинхронных типах (то есть Observable или Promise)

Не уверен, что это полностью заставит ваш код работать, но я думаю, что это исправит ошибку, которую вы получаете прямо сейчас

РЕДАКТИРОВАТЬ

Из ваших правок вы пытаетесь подписаться на (что я думаю) значение FormControl, вам нужно подписаться на изменения значения FormControl. 

this.myForm.get('myFormControl').valueChanges.subscribe(val => {
  //Do something when "myFormControl" value changes
});
0 голосов
/ 11 февраля 2020

Использовать директиву по автозаполнению матов

https://material.angular.io/components/autocomplete/overview

HTML: 

<mat-form-field>
    <input tabindex="-1"
    type="text"
    matInput
    placeholder="Search..."
    #unitsInput
    [formControl]="unit"
    [matAutocomplete]="unitAuto">
    <mat-autocomplete
    autoFocus=false
    (optionSelected)="utitSelected($event)"
    #unitAuto="matAutocomplete">
        <mat-option
        [attr.disabled]="false"
        *ngFor="let list of filteredOptions | async"
        [value]="list.codename"
        >
            <span class="options_span">
                {{list.codename}}
            </span>
        </mat-option>
    </mat-autocomplete>
</mat-form-field>

TS файл: 

.....
@ViewChild('chipInput') chipInput: { nativeElement: { value: string; }; };

unit = new FormControl();

.....

ngOnInit() {
    //
    this.projectservice.getInventoryProjectsList().subscribe(
    data => {
    this.projectsList2 = data;
    }
    );

    // for inventory dropdown
    this.inventory.getInvDropdown().subscribe(
    data => {

        this.unitsList = data['units'];
        console.log(this.unitsList);
        // tslint:disable-next-line:no-string-literal

    }
    );
    this.formBuilderOnDemand();
    this.filteredOptions = this.unit.valueChanges
        .pipe(    // Error line 
        startWith(''),
        map(value => this._filter(value))
        );
}

    // for search in item name
private _filter(value: any): any[] {
    const filterValue = value.toLowerCase();
    return this.unitsList.filter(list => list.toLowerCase().includes(filterValue));
}
    }


        utitSelected(event: MatAutocompleteSelectedEvent): void {
        this.unitsInput.nativeElement.value = '';
        this.unit.setValue('');
    }
0 голосов
/ 11 февраля 2020

Вы импортировали startWith из Rx JS? 

import {map, startWith} from 'rxjs/operators';

Вы должны добавить его в свой файл ts.

...