NgFor aktualisiert keine Daten mit Pipe in Angular2
In diesem Szenario zeige ich eine Liste der Schüler (Array) in der Ansicht mit @ angFor
:
<li *ngFor="#student of students">{{student.name}}</li>
Es ist wunderbar, dass es aktualisiert wird, wenn ich einen anderen Schüler zur Liste hinzufüge.
Allerdings, wenn ich es ein @ gebpipe
zufilter
durch den Schülernamen,
<li *ngFor="#student of students | sortByName:queryElem.value ">{{student.name}}</li>
Die Liste wird erst aktualisiert, wenn ich etwas in das Feld für den Namen des gefilterten Schülers eingebe.
Hier ist ein Link zu plnkr.
Hello_world.html
<h1>Students:</h1>
<label for="newStudentName"></label>
<input type="text" name="newStudentName" placeholder="newStudentName" #newStudentElem>
<button (click)="addNewStudent(newStudentElem.value)">Add New Student</button>
<br>
<input type="text" placeholder="Search" #queryElem (keyup)="0">
<ul>
<li *ngFor="#student of students | sortByName:queryElem.value ">{{student.name}}</li>
</ul>
sort_by_name_pipe.ts
import {Pipe} from 'angular2/core';
@Pipe({
name: 'sortByName'
})
export class SortByNamePipe {
transform(value, [queryString]) {
// console.log(value, queryString);
return value.filter((student) => new RegExp(queryString).test(student.name))
// return value;
}
}