/ / Angularowe 4-rurowe dane w tablicy z obserwowalnego interfejsu API - kątowe, api, maszynopis, potok

Angularowe 4-rurowe dane w tablicy z obserwowalnego interfejsu API - kątowe, api, maszynopis, potok

Próbuję utworzyć filtr dla moich historii. Subskrybuję wywołanie API i otrzymuję dane jako tablicę obiektów. Otrzymuję ten błąd, gdy im wpisuję filtry. Zawarłem tylko odpowiednie części, ale w razie potrzeby mogę dostarczyć więcej. Nie jestem świetny w Pipes in Angular 4, więc wszelkie wskazówki byłyby pomocne! Dziękuję Ci.

Obraz

To jest responsedata:

Odpowiedź

Rura:

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
})
}

}

Składnik:

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">

I

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

Odpowiedzi:

0 dla odpowiedzi № 1

Kiedy używasz ngFor z danymi asychronicznymimusisz użyć potoku "async". A potem możesz użyć drugiej, trzeciej rury. Ważne jest, jakie są rury zamówień. Pierwsza powinna być asynchroniczna, ponieważ kolejność wykonywania jest od lewej do prawej. Jeśli chcesz użyć potoku w kontrolerze, musisz zaimportować tę rurę i użyć w ten sposób.

const newString = pipename.transform(oldString);

0 dla odpowiedzi nr 2

Wydaje się, że historie są albo niezdefiniowane, albo puste, zmień swoją rurę w następujący sposób,

@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
})}
}

}