#angular #typescript #api #input
#angular #typescript #API #ввод
Вопрос:
Я выполнил поиск с помощью 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;
}
Ответ №1:
Я предполагаю, что вы получаете 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());
})
Комментарии:
1. Я изменяю его следующим образом: search() { if(this.bookType == «») { this . ngOnInit(); }else{ this.bookType = this.bookType.filter(res =>{ возвращает res.title. toLocaleLowerCase().match(this.bookType.title. toLocaleLowerCase()); }) } } но у меня ошибка: это условие всегда будет возвращать ‘false’, поскольку типы ‘BookType[]’ и ‘string’ не имеют перекрытия. на уровне условия if
2. спасибо за вашу помощь и потраченное время, у меня все еще есть ошибка: не удается прочитать свойство ‘toLocaleLowerCase’ неопределенного