Angular 如何使用异步数据以角度有条件地设置管道

我有一个非常简单的组件，它可以制作一个漂亮的小仪表板卡，我可以将它用于多个数据块。当我使用测试数据时，我的条件非常有效，因为它会立即发送数据并选择正确的管道。然而，在真实的仪表板上，它从API调用数据。数据被返回，但由于这不再在ngOnInit中，我的情况不会触发。有人知道在从我的服务中获取数据后，我如何选择正确的条件吗

组件：

import { Component, OnInit } from '@angular/core';
import {SecondsToMinutesPipe} from "../seconds-to-minutes.pipe";
import { DecimalPipe } from "@angular/common";

@Component({
  selector: 'app-dash-stat',
  inputs: [
    'icon', 'color', 'amount', 'description', 'time'
  ],
  templateUrl: './dash-stat.component.html',
  styleUrls: ['./dash-stat.component.css'],
})
export class DashStatComponent implements OnInit {

  private loading: boolean = true;
  private icon: string;
  private color: string = '#fff';
  private amount: any = 0;
  private description: string;
  private time: boolean = false;

  constructor(private timePipe: SecondsToMinutesPipe, private numberPipe: DecimalPipe) { }

  ngOnInit() {
      this.loading = false; //remove this and figure out 

      if(this.time){
        this.amount = this.timePipe.transform(this.amount);
      }
      else
      {
        this.amount = this.numberPipe.transform(this.amount, '1.0-0');
      }
  }

}

<div class="col-sm">
    <app-dash-stat icon="fa-tint" color="#eb1c2d" description="Litres Flown" amount="{{dashStats.volume}}"></app-dash-stat>
  </div>

  <div class="col-sm">
    <app-dash-stat icon="fa-clock-o" color="#fd6b00" description="Average Loading Time" amount="{{dashStats.filltime}}" time="true"></app-dash-stat>
  </div>

我从仪表板上这样称呼它：

import { Component, OnInit } from '@angular/core';
import {SecondsToMinutesPipe} from "../seconds-to-minutes.pipe";
import { DecimalPipe } from "@angular/common";

@Component({
  selector: 'app-dash-stat',
  inputs: [
    'icon', 'color', 'amount', 'description', 'time'
  ],
  templateUrl: './dash-stat.component.html',
  styleUrls: ['./dash-stat.component.css'],
})
export class DashStatComponent implements OnInit {

  private loading: boolean = true;
  private icon: string;
  private color: string = '#fff';
  private amount: any = 0;
  private description: string;
  private time: boolean = false;

  constructor(private timePipe: SecondsToMinutesPipe, private numberPipe: DecimalPipe) { }

  ngOnInit() {
      this.loading = false; //remove this and figure out 

      if(this.time){
        this.amount = this.timePipe.transform(this.amount);
      }
      else
      {
        this.amount = this.numberPipe.transform(this.amount, '1.0-0');
      }
  }

}

<div class="col-sm">
    <app-dash-stat icon="fa-tint" color="#eb1c2d" description="Litres Flown" amount="{{dashStats.volume}}"></app-dash-stat>
  </div>

  <div class="col-sm">
    <app-dash-stat icon="fa-clock-o" color="#fd6b00" description="Average Loading Time" amount="{{dashStats.filltime}}" time="true"></app-dash-stat>
  </div>

---

首先，如果您认为

此语法会将错误的数据传递给

组件。代码在语法上是错误的。不能像这样简单地调用属性。您应该用

[]

将它们括起来。

并且不能混合使用属性绑定和插值。 在类中，对于需要从父组件注入数据的变量，应该使用

@Input（）

注释

@Input() private loading: boolean = true;
@Input() private icon: string;
@Input() private color: string = '#fff';
@Input() private amount: any = 0;
@Input() private description: string;
@Input() private time: boolean = false;

---

首先，如果您认为

这个语法会将数据传递给

组件，这是错误的。代码在语法上是错误的。不能像这样简单地调用属性。您应该用

[]

将它们括起来。

并且不能混合使用属性绑定和插值。 在类中，对于需要从父组件注入数据的变量，应该使用

@Input（）

注释

@Input() private loading: boolean = true;
@Input() private icon: string;
@Input() private color: string = '#fff';
@Input() private amount: any = 0;
@Input() private description: string;
@Input() private time: boolean = false;

---

我在想也许发射事件会奏效，但ngOnChanges最终还是成功了

ngOnChanges(changes: SimpleChanges){

    this.loading = false; //remove this and figure out

    if(this.time){
      this.amount = this.timePipe.transform(changes.amount.currentValue);
    }
    else
    {
      this.amount = this.numberPipe.transform(changes.amount.currentValue, '1.0-0');
    }

  }

---

我在想也许发射事件会奏效，但ngOnChanges最终还是成功了

ngOnChanges(changes: SimpleChanges){

    this.loading = false; //remove this and figure out

    if(this.time){
      this.amount = this.timePipe.transform(changes.amount.currentValue);
    }
    else
    {
      this.amount = this.numberPipe.transform(changes.amount.currentValue, '1.0-0');
    }

  }

---

如果您想将数据从一个组件传递到另一个组件，并且这种数据类型发生了变化，那么您需要创建一个可以订阅的可注入数据服务，该服务可以传递值。这是我的数据服务的副本，让您了解：

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Rx';
import { ReplaySubject } from 'rxjs/ReplaySubject';

@Injectable()
export class DataService {
    // for single non-async string data
    stringData: string; 


    // for complex async data; use setData/getData
    private dataItem: ReplaySubject<any> = new ReplaySubject<any>();

    public setData(data: any) {
        this.dataItem.next(data);
    };

    public getData(): Observable<any> {
        return this.dataItem.asObservable();
    };
}

然后在两个组件中导入它：

import { DataService } from '../Services/data.service';

在组件中使用它，如下所示：

源组件：

目标组成部分：

然后，数据应该在每次发生事件时更新。为了避免内存泄漏，请确保在目标组件中取消订阅，如下所示：

ngOnDestroy() {
    // unsubscribe to ensure no memory leaks
    this.subscription.unsubscribe();
}

---

如果您想将数据从一个组件传递到另一个组件，并且这种数据类型发生了变化，那么您需要创建一个可以订阅的可注入数据服务，该服务可以传递值。这是我的数据服务的副本，让您了解：

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Rx';
import { ReplaySubject } from 'rxjs/ReplaySubject';

@Injectable()
export class DataService {
    // for single non-async string data
    stringData: string; 


    // for complex async data; use setData/getData
    private dataItem: ReplaySubject<any> = new ReplaySubject<any>();

    public setData(data: any) {
        this.dataItem.next(data);
    };

    public getData(): Observable<any> {
        return this.dataItem.asObservable();
    };
}

然后在两个组件中导入它：

import { DataService } from '../Services/data.service';

在组件中使用它，如下所示：

源组件：

目标组成部分：

然后，数据应该在每次发生事件时更新。为了避免内存泄漏，请确保在目标组件中取消订阅，如下所示：

ngOnDestroy() {
    // unsubscribe to ensure no memory leaks
    this.subscription.unsubscribe();
}

---

这似乎是一个完美的管道使用案例：哦，这看起来真的很完美！我将尝试一下，因为异步部分在父组件中，所以它不太起作用，我确信有某种方法可以将可观察到的或承诺传递给子组件，但是第一次尝试时，更改就起作用了。很高兴了解新的过滤器tho！这似乎是一个完美的管道使用案例：哦，这看起来真的很完美！我将尝试一下，因为异步部分在父组件中，所以它不太起作用，我确信有某种方法可以将可观察到的或承诺传递给子组件，但是第一次尝试时，更改就起作用了。很高兴了解新的过滤器tho！感谢您指出更好的语法。我使用的方法实际上是有效的，但我不知道这是否是最佳实践：）奇怪的是，我查找了它，您可以交替执行输入：[]或@input，但出于任何原因，我无法使用[attribute]语法。请详细说明您的确切问题@无法消除输入属性的Input（）。您所说的“您可以执行输入：[]或@input”是什么意思？它们是你所指的两种不同的东西。这个线程解释了这两种东西是如何互换的：谢谢你指出了更好的语法。我使用的方法实际上是有效的，但我不知道这是否是最佳实践：）奇怪的是，我查找了它，您可以交替执行输入：[]或@input，但出于任何原因，我无法使用[attribute]语法。请详细说明您的确切问题@无法消除输入属性的Input（）。您所说的“您可以执行输入：[]或@input”是什么意思？它们是您所指的两种不同的东西。此线程解释了两者如何可互换：