时间戳

首页 > 解决方案 > 使用 Angular 使用以前的地址自动完成表单

angular - 使用 Angular 使用以前的地址自动完成表单

问题描述

我对 Angular 不是很熟悉，但在这种情况下我必须使用它。有一项服务将以前使用的地址（字符串）列表作为Observable<{name: string; value: string}>. 对该服务的调用是this.jobAddressesService.getAddresses();并且它按预期工作得很好。这不是我有权修改的东西，所以我不理会它。

这是我的 HTML 表单。我正在尝试在用户键入时过滤下拉选项。

          <mat-form-field class="w-100 mt-25" [class.input-disabled]="form.get('JobAddressID')?.disabled">
            <input type="text" matInput placeholder="*Select previously used address" formControlName="JobAddressID" [matAutocomplete]="auto">
            <mat-autocomplete #auto="matAutocomplete" class="w-100">
              <mat-option *ngFor="let elem of savedLocationsFiltered" [value]="elem.name">
                {{elem.name | truncateString: 60}}
              </mat-option>
            </mat-autocomplete> 
          </mat-form-field>

这是我的组件，为了便于故障排除，我将其精简为基本要素：

// A bunch of import statements here

@Component({
  selector: 'job-location-auth',
  templateUrl: './job-location-auth.component.html',
  styleUrls: ['./job-location-auth.component.scss', '../../shared/css/tool-tip.scss']
})
export class JobLocationAuthComponent implements OnInit, OnDestroy {
  form: FormGroup;
  jobAddressID: FormControl;
  savedLocations: Observable<{ name: string; value: string }[]>;
  savedLocationsFiltered: any[] = [];

  private subs = new SubSink();

  constructor(
    private jobAddressesService: JobAddressesService
  ) { }

  ngOnInit(): void {
    this.initialize();
  }

  ngOnDestroy(): void {
    this.subs.unsubscribe();
  }

  initialize(): void {
    this.form = this.locationModel.formGroup;
    this.setJobAddressControl();
    this.formAddress = this.form.get('JobAddress') as FormGroup;
    this.getAddressList();
    this.filterAddresses();
  }

  setJobAddressControl(): void {
    // this method is fine
    this.jobAddressID = this.form.get('JobAddressID') as FormControl;
    this.subs.sink = this.jobAddressID.valueChanges.subscribe((value: number) => {
      if (value) {
        this.analyticsLoggingService.TrackEvent('JobDetails', 'JobAddress', 'Selected');
      }
      this.setAddress(+value);
    });
  }

  getAddressList(): void {
    this.savedLocations = this.jobAddressesService.getAddresses();
  }

  filterAddresses() {
    const jobAddress = this.form.get('JobAddressID');
    if (jobAddress) {
      jobAddress.valueChanges
      .debounceTime(200)
      .subscribe(
        res => this.getFilteredAddresses(res.value)
      );
    }
  }

  getFilteredAddresses(jobAddress: string): any {
    return this.jobAddressesService.getAddresses().pipe(
      filter(address => address.name.includes(jobAddress))
    ).subscribe(
      () => console.log('Job Address: ', jobAddress)
    );
  }

  saveAddress(): void {
    // functionality for setting address, works fine
  }
}

具体来说，我使用 filter() 的尝试似乎没有按预期工作，并且我得到“无法读取未定义的属性'包含'”。

标签： angularautocompleteobservable

解决方案

更新

尝试将您的代码更改为：

  getFilteredAddresses(jobAddress: string): any {
    return this.jobAddressesService.getAddresses().pipe(
      filter(address => name.includes(jobAddress))

老答案：

您得到的错误是 address.name 是undefined. 您需要检查为什么您得到的响应返回一个undefined. 您可以添加tap以打印对象并查看您从服务中收到的内容：

  getFilteredAddresses(jobAddress: string): any {
    return this.jobAddressesService.getAddresses().pipe(
      tap(address => console.log(address)),
      filter(address => address.name.includes(jobAddress))

它应该打印您收到的响应，您可以在其中验证您是否收到正确的响应。如果没有，您应该使用后端响应进行故障排除。

推荐阅读