Угловое 2 Использование Http наблюдаемым и трубы

Question

У меня есть сервис, который называют в REST конечной точки:

import { Task } from './task'; 
import { TaskStatus } from './task-status'; 
import { Injectable } from '@angular/core'; 
import { Http } from '@angular/http'; 

@Injectable() 
export class TaskService { 
    constructor(private http: Http){ 
    } 
    getTasks() { 
     return this.http.get('http://localhost:8080/tasks').map(res => res.json()).map(rest => rest._embedded.tasks); 
    } 
} 

Конечная точка возвращает результат, как этот:

{ 
    "_embedded": { 
    "tasks": [ 
     { 
     "title": "zxc", 
     "description": "zxc", 
     "status": "New", 
     "_links": { 
      "self": { 
      "href": "http://localhost:8080/tasks/1" 
      }, 
      "task": { 
      "href": "http://localhost:8080/tasks/1" 
      } 
     } 
     }, 
     { 
     "title": "asd", 
     "description": "qweqwe", 
     "status": "New", 
     "_links": { 
      "self": { 
      "href": "http://localhost:8080/tasks/2" 
      }, 
      "task": { 
      "href": "http://localhost:8080/tasks/2" 
      } 
     } 
     } 
    ] 
    }, 
    "_links": { 
    "self": { 
     "href": "http://localhost:8080/tasks" 
    }, 
    "profile": { 
     "href": "http://localhost:8080/profile/tasks" 
    } 
    }, 
    "page": { 
    "size": 20, 
    "totalElements": 3, 
    "totalPages": 1, 
    "number": 0 
    } 
} 

я использую службу в этом компоненте :

@Component({ 
    selector: 'app-mycomp', 
    templateUrl: './my.component.html', 
    styleUrls: ['./my.component.css'] 
}) 
export class MyComponent implements OnInit { 
    tasks: Array<Task>; 

    constructor(private taskService:TaskService) { 
    taskService.getTasks() 
    .subscribe(tasks => this.tasks = tasks, 
       err => console.error(err), 
       () => console.log('done')); 
    } 
} 

И шаблон выглядит следующим образом:

<task-details *ngFor="let task of tasks" [task]="task"></task-details> 

Это работает, как ожидалось, но когда я пытаюсь использовать трубу в шаблоне:

<task-details *ngFor="let task of tasks | WithStatus: TaskStatus.New" [task]="task"></task-details> 

я получил ошибку «Не удается прочитать свойство„фильтр“неопределенных».

Вот реализация труб:

import { Pipe, PipeTransform } from '@angular/core'; 
import { TaskStatus } from './task-status'; 

@Pipe({ name: 'WithStatus', pure: true }) 
export class TaskStatusFilter implements PipeTransform{ 
    transform(value: any, ...args: any[]): any { 
     console.log(value);// value is undefined 
     return value.filter(item => item.status == args[0]); 
    } 
} 

Answer 1

На начальном цикле обнаружения изменений, когда Аякс не был завершен, что время он пытается оценить bindings и передать tasks значения как в undefined к WithStatus трубе и выбрасывает ошибка. В таком случае вы должны обрабатывать его только внутри трубы.

@Pipe({ name: 'WithStatus', pure: true }) 
export class TaskStatusFilter implements PipeTransform{ 
    transform(value: any, ...args: any[]): any { 
     console.log(value);// value is undefined 
     return (value || []).filter(item => item.status == args[0]); 
    } 
} 

---

Другой путь был бы вы должны вводить task-details DOM внутри DOM дерева до тех пор, пока Ajax получает удалось, используя *ngIf структурную директиву.

<template [ng-if]="tasks"> 
    <task-details 
    *ngFor="let task of tasks | WithStatus: TaskStatus.New" 
    [task]="task"> 
    </task-details> 
</template> 

Вместо <template> вы также можете использовать <ng-container>, что позволяет использовать один и тот же синтаксис, как инлайн * ngIf:

<ng-container *ngIf="tasks"> 
    <task-details 
    *ngFor="let task of tasks | WithStatus: TaskStatus.New" 
    [task]="task"> 
    </task-details> 
</ng-container> 

Answer 2

Вы можете попробовать * ngIf = "задача". Он не будет инициализировать вашу трубу до тех пор, пока не поступят данные.

<div *ngIf="tasks" > 
<task-details *ngFor="let task of tasks | WithStatus: TaskStatus.New" 
       [task]="task"></task-details> 
</div>