Я попытался реализовать функцию автозаполнения angular.material.io. Однако при попытке закодировать его в моем коде я столкнулся с ошибкой наличия неопределенных параметров. Я не знаю, почему именно так.
Это мой реализованный машинописный код.
export class BooksComponent implements OnInit {
private books: Array<Book> = [];
//Autofillers & form controllers
private bookCtrl = new FormControl();
private filteredBooks: Observable<Book[]>;
constructor() {
//Replace this in the future with data passed from the API
JSONBooks.forEach(book =>
this.books.push(new Audiobook(book.title, book.description, book.ISBN, book.image, book.price, book.amazonLink,
book.publisher, book.amountOfChapters, book.soldCopies, book.adaptedForScreens, book.dateAdded, book.rating, book.amountOfHours))
);
//Formcontrol and autofills
if (this.books) {
this.filteredBooks = this.bookCtrl.valueChanges
.pipe(
startWith(''),
map(book => book ? this.filterBooks(book) : this.books.slice())
);
}
}
ngOnInit() {}
private filterBooks(value: Book): Book[] {
return this.books.filter(
//Matches book title
book => book.getTitle.toLowerCase().indexOf(value.getTitle.toLowerCase()) === 0
);
}
}
Это мой реализованный HTML-код.
Я хотел бы найти книгу с названием
</p>
<form>
<mat-form-field>
<input matInput placeholder="Title" aria-label="Title" [matAutocomplete]="auto" [formControl]="bookCtrl">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let book of filteredBooks | async" [value]="book.getTitle">
<span>{{book.getTitle}}</span>
</mat-option>
</mat-autocomplete>
</mat-form-field>
</form>
<p>
Вывод консоли, строка 118 относится к моему машинописному коду, этот раздел: .indexOf(value.getTitle.toLowerCase())
core.js:15723 ERROR TypeError: Cannot read property 'toLowerCase' of undefined
at books.component.ts:118
at Array.filter (<anonymous>)
at BooksComponent.push../src/app/books/books.component.ts.BooksComponent.filterBooks (books.component.ts:116)
at MapSubscriber.project (books.component.ts:62)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapSubscriber._next (map.js:35)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber.notifyNext (mergeMap.js:84)
at InnerSubscriber.push../node_modules/rxjs/_esm5/internal/InnerSubscriber.js.InnerSubscriber._next (InnerSubscriber.js:15)
at InnerSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
at SafeSubscriber.schedulerFn [as _next] (core.js:13514)
Я проверял несколько раз, но не могу найти проблему в своем коде.
ПРИМЕЧАНИЕ. this.books заполняется, и свойства можно прочитать. Такие методы, как book.getTitle и т. д., также работают. Почему-то объект не передается методу filterBooks.
