InvalidPipeArgument при использовании автозаполнения материала

Question

Я использую автозаполнение углового материала, чтобы показать список почтовых индексов из службы.

Ошибка, которую я получаю, когда набираю число:

InvalidPipeArgument: '18224,45429,63341,18976,71730,76008,66058,81505-1432,70360,23301,30081,28622,46815,01754,18405,91722,04553,33584,35078,64747,78746-1603,14850,40390,97207,39703,35213-4211

Это потому, что мне нужно разобрать почтовые индексы?

Спасибо за помощь! Добавление большего к сообщению, чтобы получить впечатление, что ваше сообщение в основном кодовое сообщение прочь ....

Вот код:

names.component.html

<form>
  <mat-form-field>
    <input type="text" placeholder="ZipCode" aria-label="ZipCode"
      matInput [formControl]="zipCodeControl" [matAutocomplete]="auto">
      <mat-autocomplete #auto="matAutocomplete">
        <mat-option *ngFor="let zipCode of zipCodes | async"
          [value]="zipCode">
          {{zipCode}}
        </mat-option>
      </mat-autocomplete>
  </mat-form-field>
</form>

names.component.ts

import { Component, OnInit } from '@angular/core';
import { ZipcodeService } from '../zipcode.service';
import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs';
import { map, startWith } from 'rxjs/operators';

@Component({
  selector: 'app-names',
  templateUrl: './names.component.html',
  styleUrls: ['./names.component.css']
})
export class NamesComponent implements OnInit {
  zipCodeControl = new FormControl();
  zipCodes: string[];
  filteredOptions: Observable<string[]>;

  constructor(private zipCodeService: ZipcodeService) { 
  }

  ngOnInit() {
    this.zipCodeService
        .getZipCodes()
        .subscribe(data => {this.zipCodes = data;});

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

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

    return this.zipCodes.filter(zipCode => zipCode.toLowerCase()
    .includes(filterValue));
  }



}

zipcode.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { environment } from 'src/environments/environment';
import { map } from 'rxjs/operators';

export interface IZipCodeService {
  getZipCodes(): Observable<string[]>
}

@Injectable({
  providedIn: 'root'
})
export class ZipcodeService implements IZipCodeService {

  constructor(private httpClient: HttpClient) { }

  getZipCodes(): Observable<string[]> {
    return this.httpClient.get<string[]>(environment.apiUrl + 'api/zipcode')
               .pipe(map(data => data));
  }
}

Answer 1

zipCodes - это труба string[], а async принимает только значение Observable или Promise в качестве входа. Отсюда и ошибка.

Избавьтесь от async трубы из шаблона.

Примерно так:

<form>
  <mat-form-field>
    <input type="text" placeholder="ZipCode" aria-label="ZipCode"
      matInput [formControl]="zipCodeControl" [matAutocomplete]="auto">
      <mat-autocomplete #auto="matAutocomplete">
        <mat-option *ngFor="let zipCode of zipCodes"
          [value]="zipCode">
          {{zipCode}}
        </mat-option>
      </mat-autocomplete>
  </mat-form-field>
</form>