Angular router.navigate 无法从 Material 自动完成

Question

我正在为搜索创建一个自动完成控件，我可以在其中查找产品，一旦有人点击其中一种产品，他们应该导航到具有该产品 ID 的单个产品页面 URL.

我目前的尝试使用 Angular Material 自动完成 (v 7.3.7)，并且我已经为这个示例建模 (https://itnext.io/using-angular-6-material-auto-complete-with-async-data-6d89501c4b79)。

虽然搜索部分工作正常并在我尝试从回调方法路由时选择了一个产品，但我收到了一个错误。我怀疑问题是路由器对象对自动完成不可见，可能是因为它在 FormGroup 中。

一些注意事项：

首先，虽然我希望它最终路由到产品页面，但我已将路由简化为仅路由到主页。

我已将路由器注入到构造函数中，并已通过单独的测试按钮对其进行了尝试，它工作正常。我在 FormGroup 内外都尝试了测试按钮。

我也尝试制作路由对象 public。

工作代码与教程示例非常接近，但我会在这里展示我能做的：

HTML

<form [formGroup]='prodForm'>
  <mat-form-field class="example-full-width">
    <input matInput [matAutocomplete]="auto" formControlName='prodInput'>
  </mat-form-field>

  <mat-autocomplete #auto="matAutocomplete" [displayWith]="navToProd">
    <mat-option *ngIf="isLoading" class="is-loading"><mat-spinner diameter="25"></mat-spinner></mat-option>
    <ng-container *ngIf="!isLoading">
      <mat-option *ngFor="let prod of filteredProds" [value]="prod">
        <img class="example-option-img" [src]="prod.productImage.imagePath" height="35">
        <span>{{ prod.productName }}</span>
        <small> | {{prod.brand.brandName}} | {{prod.category.categoryName}}</small>
      </mat-option>
    </ng-container>
  </mat-autocomplete>

  <div>selected product: {{prodForm.get('prodInput').value | json}}</div>

  <!-- just a test button to see if routing is working outside the control -->
  <button class="btn" (click)="test()">TEST</button>

</form>

和 ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

import { FormBuilder, FormGroup } from '@angular/forms';
import { switchMap, debounceTime, tap, finalize } from 'rxjs/operators';

import { CatalogService } from '../shared-services/catalog.service';
import { SrfProduct } from '../data-objects/srf-obj-product';

@Component({
  selector: 'app-test-alpha',
  templateUrl: './test-alpha.component.html',
  styleUrls: [
    '../app.component.scss',
    './test-alpha.component.scss'    
  ]
})
export class TestAlphaComponent implements OnInit {

  filteredProds: SrfProduct[] = [];
  prodForm: FormGroup;
  isLoading = false;  

  constructor(
    private router: Router,
    private fb: FormBuilder,
    private catalogService: CatalogService) { }

  ngOnInit() {
    this.prodForm = this.fb.group({
      prodInput: null
    })

    // ===== GET by search term    
    this.prodForm.get('prodInput').valueChanges
      .pipe(
        debounceTime(300),
        tap(() => this.isLoading = true),
          switchMap(value => this.catalogService.getProductsBySearchTerm(value, 0, 10)
          .pipe(
            finalize(() => this.isLoading = false),
          )
        )
      )
      .subscribe(prods => this.filteredProds = prods);

  }

  navToProd(prod: SrfProduct) {
    if (prod) {
      this.router.navigate(['/home']);   // <- this throws the error
      return prod.productName;
    }
  }

  test() {
    this.router.navigate(['/home']);  // <- but this works ok
  }

}

在所有情况下，当我从 [displayWith]="navToProd" 函数路由时，我都会收到 Cannot read the 属性 navigate' of undefined 错误。

Answer 1

您收到未定义错误的原因是此上下文。当您将 navToProd 绑定为 [displayWith]="navToProd" 之类的输入时，此上下文 会丢失并给出未定义的错误。在 javascript

中阅读有关这个上下文的一些内容
事件尽管您修复了未定义的错误，但您仍然以完全错误的方式使用 [displayWith]="navToProd"。 displayWith 用于将选项控制值映射到显示值，如 in docs 所述，这意味着它计算（基于选项值）和 returns 用作显示文本的字符串。与选择无关。

如果您想在用户选择一个选项时采取一些行动，您应该使用 MatAutoComplete
的 optionSelected 事件
按如下方式更改您的 html 代码

<mat-autocomplete #auto="matAutocomplete" (optionSelected)="navToProd($event)">

并修改navToProd方法如下

navToProd(event: MatAutocompleteSelectedEvent) { const prod = event.option.value; if (prod) { this.router.navigate(['/home']); // change the url according to prod } }

Angular router.navigate 无法从 Material 自动完成

Angular router.navigate won't work from Material Autocomplete

autocomplete

angular-material

angular

angular-router