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()遍历数组。

希望这可以解决。

编辑：响应您在评论中的消息

创建另一个BookType类型的属性，如下所示：

public searchedBook: BookType;

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

[(ngModel)]="searchedBook"

然后执行以下操作：

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

搜索输入角度Ng2SearchPipeModule，

1 个答案: