Angular 搜索输入角度Ng2SearchPipeModule，

我用ng2SearchPipeModule进行了输入搜索，但不起作用。我找不到我的错误？， 在我的html中，我的所有书籍都在div中。当我键入书籍标题时，将显示所有div

当然，我在app.module.ts中导入了 Ng2SearchPipeModule， 表单模块

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

我有两个错误

1-类型“BookType”上不存在属性“filter”

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

服务.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);
  }
}

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>

---

我猜您将

bookType

作为一个数组，因为您使用

*ngFor

对其进行迭代，尝试如下声明

bookType

：

public bookType: BookType[];

public searchedBook: BookType;

[(ngModel)]="searchedBook"

这表明属性在数组中填充了

BookType

。 执行此操作时，您将能够使用

this.bookType.filter（）

，因为

filter（）

迭代数组

希望这能解决问题

编辑：回应您在评论中的信息

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);
  }
}

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());
      })
    }
  }

}

创建另一个

BookType

类型的属性，如下所示：

public bookType: BookType[];

public searchedBook: BookType;

[(ngModel)]="searchedBook"

请注意，这次它没有数组类型

[]

现在在

ngModel

中使用它，如下所示：

public bookType: BookType[];

public searchedBook: BookType;

[(ngModel)]="searchedBook"

然后这样做：

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

---

我这样修改它：search（）{if（this.bookType==“”）{this.ngOnInit（）；}else{this.bookType=this.bookType.filter（res=>{return res.title.tolocalLowercase（）.match（this.bookType.title.tolocalLowercase（））；}但我有一个错误：由于类型“BookType[]”和“string”没有重叠，因此此条件将始终返回“false”。在if条件级别感谢您的帮助和花费的时间，我仍然有一个错误：无法读取未定义的属性“toLocaleLowerCase”