angular 4异步管道不工作_Angular

angular 4异步管道不工作

angular

angular 4异步管道不工作,angular,Angular,我尝试使用异步管道，但没有显示任何数据。我正在记录来自服务器的数据，它在控制台中显示良好。但由于某些原因，我无法让异步运行轮班服务 import { Injectable } from '@angular/core'; import { Shift } from '../shift/shift'; import { HttpClient } from '@angular/common/http'; @Injectable() export class ShiftService { co

我尝试使用异步管道，但没有显示任何数据。我正在记录来自服务器的数据，它在控制台中显示良好。但由于某些原因，我无法让异步运行

轮班服务

import { Injectable } from '@angular/core';
import { Shift } from '../shift/shift';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class ShiftService {

  constructor(private shift:Shift, private httpClient:HttpClient
              ) { this.checkShiftStatus();}

  checkShiftStatus():Promise<Shift>{
    this.httpClient.get<Shift>('http://localhost:8080/shift/isopen')
      .subscribe((data) => {
        this.shift = data;
        console.log(this.shift);
      },
      error => {
        console.error('Something went wrong while trying to check the shift!');
      });
    return Promise.resolve(this.shift);
  }
}

return Promise.resolve(this.shift);

从'@angular/core'导入{Injectable}；
从“../Shift/Shift”导入{Shift}；
从'@angular/common/http'导入{HttpClient}；
@可注射（）
导出类移位服务{
构造函数（专用shift:shift，专用httpClient:httpClient
){this.checkShiftStatus（）；}
checkShiftStatus（）：承诺{
this.httpClient.get（'http://localhost:8080/shift/isopen')
.订阅（（数据）=>{
this.shift=数据；
console.log（this.shift）；
},
错误=>{
console.error（'试图检查班次时出错！'）；
});
返回承诺。解决（本次转移）；
}
}

shift.component.ts

import { Component, OnInit } from '@angular/core';
import { Shift } from './shift';
import { ShiftService } from '../services/shift.service';

@Component({
  selector: 'app-shift',
  templateUrl: './shift.component.html',
  styleUrls: ['./shift.component.css']
})
export class ShiftComponent implements OnInit {
  isShiftOpen:Promise<boolean>;

  shiftLive:Promise<Shift>;

  constructor(private shiftService: ShiftService, public shift:Shift) { }

  ngOnInit() {
    this.isShiftOpen = this.getShift().then(shift => this.shift.active = shift.active);
    this.shiftLive = this.shiftService.checkShiftStatus();
  }

  getShift(){
    return this.shiftService.checkShiftStatus().then(shift => this.shift = shift);
  }
}

从'@angular/core'导入{Component，OnInit}；
从“/Shift”导入{Shift}；
从“../services/shift.service”导入{ShiftService}；
@组成部分({
选择器：“应用程序移位”，
templateUrl:“./shift.component.html”，
样式URL:['./shift.component.css']
})
导出类ShiftComponent实现OnInit{
开放：承诺；
移情：承诺；
构造函数（私有shiftService:shiftService，公共shift:shift）{}
恩戈尼尼特（）{
this.isShiftOpen=this.getShift（）.then（shift=>this.shift.active=shift.active）；
this.shiftLive=this.shiftService.checkShiftStatus（）；
}
getShift（）{
返回此.shiftService.checkShiftStatus（）.then（shift=>this.shift=shift）；
}
}

shift.component.html

<md-grid-list *ngIf="isShiftOpen | async" cols="2" rowHeight="100px">
  <md-grid-tile>
      <button md-raised-button [disabled]='isShiftOpen' color="primary">Open Shift</button>
      <button md-raised-button [disabled]='!isShiftOpen' color="warn">Close Shift</button>
  </md-grid-tile>
</md-grid-list>

<md-card class="card">
  <md-card-title>
    Shift Stats:
  </md-card-title>
  <md-card-content>

    </md-card-content>
</md-card>
<!-- <div *ngIf="(shiftLive | async)?.notnull; else loading"> -->
<div *ngIf="shiftLive | async">
    <p> Shift status: {{ shiftLive.active }} </p>

    <p> Tickets Sold: {{ shiftLive.totalNumberOfTicketsSold }} </p>
</div>
<ng-template #loading>Loading Data...</ng-template>


空班
近距离换班
轮班统计：
移位状态：{shiftLive.active}
已售出门票：{{shiftLive.totalNumberOfTicketsSelled}
正在加载数据。。。

即使服务提供的值为true，按钮也不会显示。我确实显示了div，但shiftLive.active或shiftLive.totalnumberofticketssell没有值

我猜您在shift.service.ts的checkShiftStatus方法中返回了一个未定义的值

import { Injectable } from '@angular/core';
import { Shift } from '../shift/shift';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class ShiftService {

  constructor(private shift:Shift, private httpClient:HttpClient
              ) { this.checkShiftStatus();}

  checkShiftStatus():Promise<Shift>{
    this.httpClient.get<Shift>('http://localhost:8080/shift/isopen')
      .subscribe((data) => {
        this.shift = data;
        console.log(this.shift);
      },
      error => {
        console.error('Something went wrong while trying to check the shift!');
      });
    return Promise.resolve(this.shift);
  }
}

return Promise.resolve(this.shift);

您应该通过以下方式重构您的方法：

checkShiftStatus(): Observable<Shift>{
  return this.httpClient.get<Shift>('http://localhost:8080/shift/isopen')
}


空班
近距离换班
轮班统计：
移位状态：{{isActive（）}}
已售出门票：{{ticketssell（）}}
正在加载数据。。。

我猜您在shift.service.ts的checkShiftStatus方法中返回了一个未定义的值

import { Injectable } from '@angular/core';
import { Shift } from '../shift/shift';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class ShiftService {

  constructor(private shift:Shift, private httpClient:HttpClient
              ) { this.checkShiftStatus();}

  checkShiftStatus():Promise<Shift>{
    this.httpClient.get<Shift>('http://localhost:8080/shift/isopen')
      .subscribe((data) => {
        this.shift = data;
        console.log(this.shift);
      },
      error => {
        console.error('Something went wrong while trying to check the shift!');
      });
    return Promise.resolve(this.shift);
  }
}

return Promise.resolve(this.shift);

您应该通过以下方式重构您的方法：

checkShiftStatus(): Observable<Shift>{
  return this.httpClient.get<Shift>('http://localhost:8080/shift/isopen')
}


空班
近距离换班
轮班统计：
移位状态：{{isActive（）}}
已售出门票：{{ticketssell（）}}
正在加载数据。。。

您正在异步解析结果之前解析承诺，并且承诺只解析一次。您需要返回未解决的承诺，等待结果出来，然后解决您的承诺，如下所示：

checkShiftStatus():Promise<Shift>{
  let promise = new Promise<Shift>();
  this.httpClient.get<Shift>('http://localhost:8080/shift/isopen')
    .subscribe((data) => {
      this.shift = data;
      promise.resolve(this.shift);
      console.log(this.shift);
    },
    error => {
      console.error('Something went wrong while trying to check the shift!');
    });
  return promise;
}

模板：

//only use async once to avoid multiple subscriptions, and declare it "as" whatever you want, and then you have access to it throughout the template, you can still use your loading template as you want.
<ng-container *ngIf="shiftLive$ | async as shiftLive; else loading"> 
<md-grid-list *ngIf="shiftLive.active" cols="2" rowHeight="100px">
  <md-grid-tile>
      <button md-raised-button [disabled]='shiftLive.active' color="primary">Open Shift</button>
      <button md-raised-button [disabled]='!shiftLive.active' color="warn">Close Shift</button>
  </md-grid-tile>
</md-grid-list>

<md-card class="card">
  <md-card-title>
    Shift Stats:
  </md-card-title>
  <md-card-content>

  </md-card-content>
</md-card>

<div>
    <p> Shift status: {{ shiftLive.active }} </p>

    <p> Tickets Sold: {{ shiftLive.totalNumberOfTicketsSold }} </p>
</div>
<ng-template #loading>Loading Data...</ng-template>
</ng-container>

//仅使用async一次以避免多次订阅，并将其声明为“任意”，然后您可以在整个模板中访问它，您仍然可以根据需要使用加载模板。
空班
近距离换班
轮班统计：
移位状态：{shiftLive.active}
已售出门票：{{shiftLive.totalNumberOfTicketsSelled}
正在加载数据。。。

您正在异步解析结果之前解析承诺，并且承诺只解析一次。您需要返回未解决的承诺，等待结果出来，然后解决您的承诺，如下所示：

checkShiftStatus():Promise<Shift>{
  let promise = new Promise<Shift>();
  this.httpClient.get<Shift>('http://localhost:8080/shift/isopen')
    .subscribe((data) => {
      this.shift = data;
      promise.resolve(this.shift);
      console.log(this.shift);
    },
    error => {
      console.error('Something went wrong while trying to check the shift!');
    });
  return promise;
}

模板：

//only use async once to avoid multiple subscriptions, and declare it "as" whatever you want, and then you have access to it throughout the template, you can still use your loading template as you want.
<ng-container *ngIf="shiftLive$ | async as shiftLive; else loading"> 
<md-grid-list *ngIf="shiftLive.active" cols="2" rowHeight="100px">
  <md-grid-tile>
      <button md-raised-button [disabled]='shiftLive.active' color="primary">Open Shift</button>
      <button md-raised-button [disabled]='!shiftLive.active' color="warn">Close Shift</button>
  </md-grid-tile>
</md-grid-list>

<md-card class="card">
  <md-card-title>
    Shift Stats:
  </md-card-title>
  <md-card-content>

  </md-card-content>
</md-card>

<div>
    <p> Shift status: {{ shiftLive.active }} </p>

    <p> Tickets Sold: {{ shiftLive.totalNumberOfTicketsSold }} </p>
</div>
<ng-template #loading>Loading Data...</ng-template>
</ng-container>

//仅使用async一次以避免多次订阅，并将其声明为“任意”，然后您可以在整个模板中访问它，您仍然可以根据需要使用加载模板。
空班
近距离换班
轮班统计：
移位状态：{shiftLive.active}
已售出门票：{{shiftLive.totalNumberOfTicketsSelled}
正在加载数据。。。

async pipe是订阅Observable的更干净、更安全、更可取的方法async pipe是订阅Observable的更干净、更安全、更可取的方法我做了建议的更改并尝试运行该程序。但最后出现了一个错误，错误类型错误：无法读取Object.eval[as updateRenderer]（ShiftComponent.html:18）处Object.debugUpdateRenderer[as updateRenderer]处未定义的属性“active”。在服务中，我使用这个.httpClient.get（'）；目前只有这么多代码。甚至都不想抓住错误。有什么建议吗？谢谢。包括*ngIf之后=“shiftLive$|异步为shiftLive；否则，在div部分加载时，它开始正常工作。但是你对服务器进行多个http调用是正确的，你只需要订阅一次，就像我向你展示的那样。不需要将可观察到的流拆分为两个调用。所有需要的信息都在同一个callMaterial中导致问题。在将div移动到md网格中之后，我只需要进行一次http调用。谢谢你的帮助！我做了您建议的更改并尝试运行该程序。但最后出现了一个错误，错误类型错误：无法读取Object.eval[as updateRenderer]（ShiftComponent.html:18）处Object.debugUpdateRenderer[as updateRenderer]处未定义的属性“active”。在服务中，我使用这个.httpClient.get（'）；目前只有这么多代码。甚至都不想抓住错误。有什么建议吗？谢谢。包括*ngIf之后=“shiftLive$|异步为shiftLive；否则，在div部分加载时，它开始正常工作。但是你对服务器进行多个http调用是正确的，你只需要订阅一次，就像我向你展示的那样。不需要将可观察到的流拆分为两个调用。所有需要的信息都在同一个callMaterial中导致问题。将div移到内部后