angular7 模糊搜索

在 Angular 7 中，你可以使用 Angular Material 的 Autocomplete 组件来实现模糊搜索功能。以下是一个简单的示例，展示了如何在 Angular 7 中实现模糊搜索：

首先，确保你已经安装了 Angular Material，可以通过运行以下命令来安装：

npm install @angular/material @angular/cdk @angular/animations

然后，在你的模块文件中引入所需的模块：

import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [MatAutocompleteModule, FormsModule, ReactiveFormsModule],
  // ...
})
export class YourModule { }

接下来，在你的组件中，你可以使用 Autocomplete 组件来实现模糊搜索。首先，确保你在组件的 HTML 模板中添加了一个输入框和一个 Autocomplete 组件：

<input type="text" [(ngModel)]="searchValue" (input)="filterValues()" placeholder="Search">
<mat-autocomplete #autoComplete="matAutocomplete">
  <mat-option *ngFor="let value of filteredValues" [value]="value">
    {{ value }}
  </mat-option>
</mat-autocomplete>

然后，在你的组件的 TypeScript 文件中，你可以定义一个数组来保存所有的值，以及一个用于过滤值的函数：

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { startWith, map } from 'rxjs/operators';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  searchValue: string;
  values: string[] = ['Apple', 'Banana', 'Orange', 'Pineapple', 'Grapes'];
  filteredValues: string[];

  filterValues() {
    this.filteredValues = this.values.filter(value => value.toLowerCase().includes(this.searchValue.toLowerCase()));
  }
}

在上述代码中，我们使用了一个名为 `filterValues` 的方法来过滤值。这个方法会根据输入框中的值来过滤原始的值数组，并将过滤后的结果赋值给 `filteredValues` 数组。然后，在 Autocomplete 组件中，我们使用 `filteredValues` 数组来显示过滤后的值。

这样，当你在输入框中输入内容时，Autocomplete 组件会根据输入的内容进行模糊搜索，并展示匹配的结果。

希望能帮到你！如有更多问题，请随时提问。