Angular 10 值在自動完成中為空

Question

我的 DataService 使用了以下接口：

export interface Shop{
  shop_name: string;
  show_owner: string;
}

我正在嘗試使用 Angular 材料來構建帶有過濾器的自動完成功能：

export class ShopMetaDataComponent implements OnInit {
  myControl = new FormControl();
  shops: Shop[];
  filteredShops: Observable<Shop[]>;
  selectedShop: Shop;

  constructor(private dataService: DataService) {
  }

      ngOnInit(): void {

        // get shops metadata
        this.dataService.getShops().subscribe({
          next: data => {
            this.shops = data;
            this.initiateFilter();
          }
          ,
          error: err => console.log(err.message)
        });
      }
    
      private initiateFilter(){
        this.filteredShops= this.myControl.valueChanges
          .pipe(
            startWith(''),
            map(value => this._filter(value))
          );
      }
    
      private _filter(value: any): Shop[] {
        console.log('value : ' + value);
        const filterValue = value.shop_name.toLowerCase();
        return this.shops.filter(shop=> shop.shop_name.toLowerCase().includes(filterValue));
      }

問題是在 _filter 方法中接收到的值是空的。 我在控制台中看到的打印是： value:
在此打印之后，我在過濾器方法中收到以下錯誤：

ERROR TypeError: Cannot read property 'toLowerCase' of undefined

我試圖將商店打印到控制台，但它們不是空的。

HTML：

<form class="simple-form">
  <mat-form-field class="example-full-width">
    <input type="text"
           placeholder="Pick one"
           aria-label="Number"
           matInput
           [formControl]="myControl"
           [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let option of filteredShops| async" [value]="option">
        {{option.shop_name}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

與本例相同。

我在這里想念什么？

更新

篩選：

  private _filter(value: any): Shop[] {
    console.log('value : ' + value);
    // shop was chosen
    if (value && value.shop_name) {
      this.selectedShop= value;
    }
    // input contains text but not shop
    else if (value) {
      return this.shops.filter(option => option.shop_name.toLowerCase().includes(value));
    }
    // input doesnt contain anything
    return this.shops;
  }

Answer 1

您使用 shop_name 初始化 filterValue 但您不檢查該值是否為空以及是否為商店值。

您可以通過兩種方式解決此問題。

解決方案 1

檢查 value 是否為 object 並且有一個名為 shop_name 的屬性

private _filter(value: any): Shop[] {
        if( value && value.shop_name){
            console.log('value : ' + value);
            const filterValue = value.shop_name.toLowerCase();
            return this.shops.filter(shop=> 
                shop.shop_name.toLowerCase().includes(filterValue));
        } else {
            return shop
        }
      }

解決方案 2

將第一個可觀察項目更改為商店 object

this.filteredShops= this.myControl.valueChanges
          .pipe(
            startWith({
                shop_name: '',
                shop_owner: ''
            }),
            map(value => this._filter(value))
          );