的Http观察的和管

的角2用法我有一个称之为REST端点的服务：的Http观察的和管

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

来源

2016-09-24 Evgeni Dimitrov

'WithStatus：TaskStatus.New'什么是TaskStatus.New？你在任何地方都没有这样的事情...... – micronyks

在初始变更检测周期阿贾克斯时尚未完成的那个时候它试图评估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树里面，直到阿贾克斯被使用*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>

来源

2016-09-24 15:47:00

谢谢@yurzui先生，我不知道'ng-container'，我没有发现任何资源提及相同，请你提供参考，欣赏你的帮助:) –

不幸的是，没有关于'ng-container'的好文档。最好的参考是这个https://github.com/angular/angular/blob/2.1.0-beta.0/modules/%40angular/core/test/linker/ng_container_integration_spec.ts – yurzui

@yurzui酷，再次我欣赏你的帮助，你在Angular 2团队工作？ –

您可以尝试* ngIf = “任务”。数据到达之前它不会初始化您的管道。

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

来源

2016-09-24 15:48:31 micronyks

的Http观察的和管

回答

相关问题