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>

Answer 2

我知道这种情况已经存在了一段时间，但是由于我今天遇到了同样的问题，并且设法解决了这个问题，因此我将发布解决方案。

如上所述，异步需要可观察的。这里的事情是，您的* ngFor应该迭代filteredOptions而不是zipCodes，因为zipCode将由_filter方法返回。

换句话说，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 option of filteredOptions | async"
          [value]="option">
          {{option}}
        </mat-option>
      </mat-autocomplete>
  </mat-form-field>
</form>

您可以在官方文档中进一步了解它：https://material.angular.io/components/autocomplete/overview

使用材料自动完成时的InvalidPipeArgument

2 个答案: