的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觀察的和管

回答

相關問題