Данни за ъгловите 4 тръби в масив от API наблюдаеми - ъглови, апи, машинни, тръби

Опитвам се да създам филтър за моите истории. Абонирам се за обаждането в API и получавам данните като масив от обекти. Получавам тази грешка, когато im пише в филтрирането. Аз съм включил само съответните части, но мога да предложа повече, ако е необходимо. Аз не съм толкова страхотно за Pipes в ъглова 4, така че всички съвети биха били полезни! Благодаря ти.

Това е отговорът:

Тръба:

import { Pipe, PipeTransform } from "@angular/core";
import { DiscoverComponent } from "./discover/discover.component"


@Pipe({
name: "filter"
})
export class FilterPipe implements PipeTransform {

//transform is called every time that the input changes in the filter pipe
transform(stories: any, term: any): any {
//check if search term is undefined and return all stories
if(term === undefined) return stories;
// return updated storiesarray with filter
return stories.filter((story) => {
return story.name.toLowerCase().includes(term.toLowerCase()) //either true or false
})
}

}

Компонент:

private getStories(page, hits, feed) {
feed = this.feed;
if (this.noSpam || this.page > 0) { //no doubletap feed
this.noSpam = false;
this.storiesService.getStories(this.page, this.hits, this.feed)
.subscribe(
(data) => {
console.log(data);
if (!data || data.hits == 0 || data.hits < 6) {
this.finished = true;
console.log("No more hits :(")
} else {
this.finished = false;
// this.data = data;
for (let story of data.hits) {
this.hitsArray.push(story);
// console.log(data)
}
}
})
setTimeout(() => {
console.log("Wait 2 seconds before trying to get feed!")
this.noSpam = true;
}, this.delay);

console.log("side: " + this.page)
}
}

HTML:

<input [(ngModel)]="term" [ngModelOptions]="{standalone: true}" type="text" id="bloody-bird-forms" class="form-control">

И

<div class="col-xs col-sm col-md-4 col-lg-4 story" *ngFor="let story of hitsArray | filter:term">

Отговори:

Когато използвате ngFor с асинхронни даннитрябва да използвате тръба "async". И след това можете да използвате втора, трета тръба. Важно е каква е реда на тръбите. Първата трябва да е async, защото редът на изпълнение е от ляво на дясно. Ако искате да използвате тръба в контролера си, трябва да импортирате тази тръба и да я използвате по този начин.

const newString = pipename.transform(oldString);

Изглежда, че историите са неопределени или невалидни, сменете тръбата си както следва,

@Pipe({
name: "filter"
})
export class FilterPipe implements PipeTransform {

//transform is called every time that the input changes in the filter pipe
transform(stories: any, term: any): any {
//check if search term is undefined and return all stories
if(!stories) return [];
if(stories && term === undefined) return stories;
// return updated storiesarray with filter
if(stories && storiess.length > 0){
return stories.filter((story) => {
return story.name.toLowerCase().includes(term.toLowerCase()) //either true or false
})}
}

}