时间戳

首页 > 解决方案 > 如何在值更改检查之前完成角度可观察？

angular - 如何在值更改检查之前完成角度可观察？

问题描述

我正在创建一个类似于 Angular Autocomplete 的搜索栏，但我无法及时获取我的数组。

import { Component, OnInit } from '@angular/core';
import { IngredientService } from '../ingredients-shared/ingredient-service.service';
import { Ingredient } from '../ingredients-models/ingredient';
import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs';
import {map, startWith} from 'rxjs/operators';
@Component({
  selector: 'app-list-ingredients',
  templateUrl: './list-ingredients.component.html',
  styleUrls: ['./list-ingredients.component.css']
})
export class ListIngredientsComponent implements OnInit {

  options: string[] = ['Angular', 'React', 'Vue'];

  mylist: Ingredient[];


  myControl = new FormControl();
  filteredOptions: Observable<Ingredient[]>;


  constructor(public ingredientService: IngredientService) { }

    ngOnInit() {

    this.ingredientService.getAllIngredients().subscribe( (ingredients: Ingredient[]) => {
      this.mylist = ingredients
    });

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


  private _filter(value: string): Ingredient[] {

    console.log(value)
    const filterValue = value.toLowerCase();
    return this.mylist.filter(ingredient => ingredient.ingredient_name.toLowerCase().includes(filterValue));
  }

  displayIngredientName(subject: Ingredient){
    return subject ? subject.ingredient_name : undefined
  }

}

如您所见，我需要在检查表单中的值更改之前填充 mylist ，并且我无法弄清楚如何事先完成。

我尝试使用异步/等待，但我不想在 ngOnInit 中使用异步。我还在订阅中插入了表单更改，但当然这只发生一次，所以它不起作用。

有什么建议吗？谢谢

编辑：这是 HTML：

    <form>
    <mat-form-field>
        <input type="text" matInput [matAutocomplete]="auto" [formControl]="myControl"/> 
        <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayIngredientName">
            <mat-option *ngFor="let ingredient of filteredList$ | async" [value]="ingredient" >
                {{ingredient.ingredient_name}}
            </mat-option>
        </mat-autocomplete>
    </mat-form-field>
</form>

标签： angularasynchronousobservableangular-observable

解决方案

您需要将两个可观察对象组合成单个流，因为它们相互依赖。用户可以在加载数据之前开始输入，在加载数据之前输入的方法搜索值将被忽略。

你可以像这样实现它：

const ingredients$ = this.ingredientService.getAllIngredients();
const searchValues$ = this.myControl.valueChanges.pipe(startWith(''), map(val => val.toLowerCase()));
const filteredList$ = combineLatest(ingredients$, searchValues$)
                      .pipe(map(([list, searchVal]) => list.filter(item => item.ingredient_name.toLowerCase().includes(searchVal))));

然后只需在模板中使用异步管道。并且不要忘记 OnPush 更改检测。使用 debounceTime 来限制快速键入的搜索操作也是一个好主意。

推荐阅读