Angular 4 Pipes中的异步调用

我有一个服务从服务器获取时间的方法，我打算在自定义管道中使用它。管道的目的是将时间戳与当前时间进行比较，并以可读的格式返回。Angular 4 Pipes中的异步调用

服务

export class TimeService{ 
    currentServerTime; 

    fetchCurrentTimeStamp(){ 
    //http request using Observable 
    return sendGETRequest(.....).map(data => { 
     this.currentServerTime = data; 

     return this.currentServerTime; 
    }) 
    } 
}

管

export class GetTimeFromNowPipe implements PipeTransform{ 

    fromNow; 
    currentServerTime: number; 
    constructor(private timeService: TimeService, private appSettings: AppSettings){} 

    transform(value: number){ 
     var currentTime; 
     this.timeService.fetchCurrentTimestamp().subscribe(data => { 
      currentTime = data 
      if(!value) return ""; 

      if(value){ 
       let newDate = moment.unix(value); 
       this.fromNow = newDate.from(moment.unix(currentTime), true); 
      } 
      return this.fromNow; 
     }); 

    } 
}

HTML

<ul> 
    <li *ngFor = "let model of models"> 
     <span>{{model.created | getTimeFromNow}}</span> 
    </li> 
</ul>

我卡与异步调用。只有在我从服务器获取数据后，如何从管道中返回值？

来源

2017-08-28 adityav

一个return缺失和subscribe需要改变map允许异步管办订阅

return this.timeService.fetchCurrentTimestamp().map(data => {

和异步数值异步管道需要使用

<span>{{model.created | getTimeFromNow | async }}</span>

来源

2017-08-28 12:34:29

的实现它的最好方法是不使用管道内的服务。您可以使用自定义管道仅实现管道需要执行的操作。你管需要被这样定义：

export class GetTimeFromNowPipe implements PipeTransform{ 

    constructor(private appSettings: AppSettings){} 

    transform(value: number, currentTime:number){ 
      if(!value) return ""; 
      else{ 
       let newDate = moment.unix(value); 
       return newDate.from(moment.unix(currentTime), true); 
      } 
    } 
}

你的组件里，你可以打电话给你的服务，它存储varible里面你的OnInit生命周期（当然你需要注入组件内的服务）。

serverTime:number; 
ngOnInit(){ 
    this.timeService.fetchCurrentTimestamp().subscribe(data=>this.serverTime=data); 
    }

然后在你的组件的模板里面你可以使用你的管道。有两种

<ul *ngIf="serverTime"> 
    <li *ngFor = "let model of models"> 
     <span>{{model.created | getTimeFromNow:serverTime}}</span> 
    </li> 
</ul>

或者

<ul> 
    <li *ngFor = "let model of models"> 
     <span>{{model.created | getTimeFromNow: serverTime | async}}</span> 
    </li> 
</ul>

澄清&用途：

这个实现的目的是为了方便：

-Testing你管

- 在服务器出现问题的情况下易于调试

- 服务器的一个独立实现，可用于具有不同参数（可重用性）的其他组件。

来源

2017-08-28 13:32:05

Angular 4 Pipes中的异步调用

回答

相关问题