I have a
query:
export class Task {
public id: number;
public title: string;
public isDone: boolean;
public createdDate: Date;
public assignedTo: string;
}
A method:
fetchTasks(): Observable < Task[] > {
return this.http.get(this.tasksUrl)
.map(this.extractData)
.catch(this.handleError);
}
private extractData(res: Response) {
let body = res.json();
return body || {};
}
In my view:
fetchTasks(){
this.taskService.fetchTasks()
.subscribe(
tasks => this.tasks = tasks,
error => this.errorMessage = <any>error
);
}
And template file:
<div class="ui large selection animated divided list">
<a *ngFor="let task of (tasks | taskFilter:false)" class="item">
<div class="right floated content">
<div class="ui vertical animated negative button" tabindex="0">
<div class="hidden content">Delete</div>
<div class="visible content">
<i class="fa fa-trash" aria-hidden="true"></i>
</div>
</div>
</div>
<i class="minus square outline icon"></i>
<div class="content">
<div class="header">{{task.title}}</div>
<div class="description">{{task.createdDate | date:"MMM-dd-yyyy"}}</div>
</div>
</a>
</div>
The issue arises when I attempt to utilize the pipe to filter the completed tasks, resulting in an error stating Cannot read property filter of undefined.
Have I made a mistake or are there alternative methods to filter it without using a pipe?
The pipe I created:
transform(allTasks: Task[], args?: boolean){
if (allTasks === null) {
return null;
}
return allTasks.filter(task => task.isDone);
}
Your assistance is greatly appreciated.