Блог

Я выполнил поиск с помощью ng2SearchPipeModule, но он не работает, я не могу найти свою ошибку?, в моем html все мои книги находятся в divs, будет ли при вводе названия книги отображаться весь div?,

конечно, я импортировал в app.module.ts Ng2SearchPipeModule, FormsModule

у меня 2 ошибки

1 — Свойство ‘filter’ не существует для типа ‘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);
  }
}
  

компонент.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;
}
  

Я предполагаю, что вы получаете bookType как массив, потому что вы повторяете его с *ngFor помощью try to declare 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());
})