搜索输入角度 Ng2SearchPipeModule，

Question

我使用 ng2SearchPipeModule 进行了输入搜索，但它不起作用我找不到我的错误？， 在我的 html 中，我所有的书都在 div 中，当我输入书名时，所有的 div 都会显示吗？，

当然我是在 app.module.ts 中导入的 Ng2SearchPipeModule， FormsModule

我有 2 个错误

1 - 类型“BookType”上不存在属性“过滤器”。

2 - 我的 html 中没有发生任何事情

service.ts

export class BookService {

  url: string = 'http://henri-potier.xebia.fr/books';

  constructor(private http: HttpClient) { }

  getBookList(): Observable<BookType> {
    return this.http.get<BookType>(this.url);
  }
}

component.ts

import { Component, OnInit } from '@angular/core';
import { BookType } from '../models/book-type';
import { BookService } from '../services/book.service';

@Component({
  selector: 'app-content',
  templateUrl: './content.component.html',
  styleUrls: ['./content.component.css']
})
export class ContentComponent implements OnInit {

  public bookType: BookType;

  constructor(private bookService: BookService) { }

  ngOnInit(): void {
    this.bookService.getBookList().subscribe(data => {
      this.bookType = data
    });
  }

  search() {
    if(this.bookType.title == "") {
      this.ngOnInit();
    }else{
      this.bookType = this.bookType.filter(res =>{
        return res.bookType.title.toLocaleLowerCase().match(this.bookType.title.toLocaleLowerCase());
      })
    }
  }

}

html

 <input class="form-control" type="text" name="search" [(ngModel)]="bookType" (ngModelChange)="search()"
    placeholder="Rechercher">
    <div class="grid-container">
        <div class="wrapper" *ngFor="let book of bookType" class="form-group">
            <div class="product-img">
                <img [src]="book.cover" alt="livre" height="420" width="327">
            </div>
            <div class="product-info">
                <div class="product-text">
                    <h2>{{book.title}}</h2>
                    <p>{{book.synopsis}}</p>
                </div>
                <div class="product-price-btn">
                    <p>{{book.price | currency: 'EUR'}}</p>
                    <button type="button" (click)="addBookToCart()">buy now</button>
                </div>
            </div>
        </div>
    </div>

界面

export interface BookType {
    title: string;
    price: number;
    cover: string;
    synopsis: string;
}

Answer 1

我猜你得到了 bookType 作为一个数组，因为你用 *ngFor 迭代它尝试像这样声明 bookType：

public bookType: BookType[];

这表明该属性在数组中填充了BookType。 当您这样做时，您将能够使用this.bookType.filter()，因为filter() 会遍历一个数组。

希望这能解决它。

编辑：响应您在 cmets 中的消息

像这样创建另一个BookType 类型的属性：

public searchedBook: BookType;

注意这次没有数组类型[] 现在像这样在ngModel 中使用它：

[(ngModel)]="searchedBook"

然后这样做：

this.bookType = this.bookType.filter(res =>{
        return res.title.toLocaleLowerCase().match(this.searchedBook.title.toLocaleLowerCase());
})