0
I wie unten einfach Angular 2 app:(Angular2) `* ngfor` mit Filter mit Rohr nicht von Asynchron-Daten arbeiten
Datenstruktur
class Item {
name: string,
status: boolean
}
Vorlage
Komponente
export class ItemsComponent implement OnInit {
items: Item[]
constructor(private itemService: ItemService) { }
ngOnInit() {
this.getItems();
}
private getItems(): void {
this.itemService.getItems().then(items => this.items = items);
}
}
mit asynchronen Datenempfängern getItems() von ItemService die Promise verwendet.
Diese App funktioniert gut. Die vollständige Artikelliste wird im Browser angezeigt.
Ich möchte mit dem Status true nur die Elemente angezeigt werden soll. Dazu implementiert ich ein einfaches Rohr zu filtern items von status:
@Pipe({
name: 'filterByStatus'
})
export class FilterByStatusPipe implements PipeTransform {
transform(votes: Vote[], status: boolean): Vote[] {
return votes.filter(vote => vote.status === status);
}
}
und ich li Tag in meiner Vorlage aktualisiert
<li *ngFor="let item of items|filterByStatus:true">{{ item.name }}</li>
Aber dieses Update macht <ul *ngIf="items"> falsch so <li> s sind nicht berechnet. (d. h. items === undefined)
Ich weiß nicht, warum die erste Version gut funktioniert, aber die aktualisierte Version nicht. Und wie bekomme ich items mit status === true?
Danke.
http://stackoverflow.com/questions/38057537/how-to-check-length-of-the-an-observable-array/38057574#38057574 – yurzui
Ihr Code ist tatsächlich korrekt und sollte funktionieren wie es ist. Wie sicher bist du, dass "vote.status" tatsächlich mit einem booleschen Wert gefüllt ist? Es macht auch keinen Sinn, dass eine Pipe "Items" undefiniert macht. Da stimmt etwas anderes nicht – PierreDuc
Danke euch beiden! – Analysis