时间戳

首页 > 解决方案 > 如何覆盖 Angular 中现有组件的数据？

angular - 如何覆盖 Angular 中现有组件的数据？

问题描述

我正在尝试编写一个 Web 应用程序来监控各种加密货币的价格，作为学习 Angular 的练习。

目前我已经设法每 5 秒从 API 返回值并在屏幕上显示新数据。问题在于，当进行 API 调用时，新数据用于创建新组件。这意味着每 5 秒创建 3 个新组件。相反，我希望现有组件被它们的新值覆盖。

为了能够做到这一点，我觉得我必须先创建组件，而不是使用*ngFor指令动态创建它们。但我不太确定我该怎么做。

主页组件模板

<div class="container ticker-row-container">
  <div class="row">
    <div class="col-12">
      <app-ticker-row *ngFor="let detail of cryptoDetails" [cryptoDetail]="detail"></app-ticker-row>
    </div>
  </div>
</div>

Home组件类

export class HomeComponent implements OnInit {

  cryptos: string[] = ['bitcoin', 'ethereum', 'litecoin']
  cryptoDetails: CryptoDetail[];

  constructor(private cryptoService: CryptoService) { }

  ngOnInit() {
    this.cryptoDetails = new Array();
    this.getCryptoData();
    const source = interval(5000).subscribe(val => this.getCryptoData());
  }

  getCryptoData(){
    console.log("get crypto")
    for(let crypto of this.cryptos){
      this.cryptoService.getCryptoInfo(crypto).subscribe(res => {
        let data = res.data;
        let cryptoDetail = new CryptoDetail(data.id, data.rateUsd, data.symbol);
        this.cryptoDetails.push(cryptoDetail);

      })
    }
  }
}

TickerRowComponent 模板

<div class="row">
  <div class="col-4">{{cryptoDetail.symbol}}</div>
  <div class="col-4">{{cryptoDetail.id}}</div>
  <div class="col-4">{{cryptoDetail.rate}}</div>
</div>

TickerRowComponent 类

export class TickerRowComponent implements OnInit, OnChanges {

  @Input() cryptoDetail: CryptoDetail

  currentRate: string;

  constructor() { }

  ngOnInit() {
    this.currentRate = this.cryptoDetail.rate;
  }

}

标签： angularrxjs

解决方案

当您每 5 秒订阅一次 cryptoService 时，您会将新的加密详细信息推送到 cryptoDetails 数组，因此它会保留以前的加密详细信息以及新的加密详细信息。相反，您可以做的是从 getCryptoData 函数中的数组中删除以前的值：

getCryptoData(){
    this.cryptoDetails = [];
    console.log("get crypto")
    for(let crypto of this.cryptos){
      this.cryptoService.getCryptoInfo(crypto).subscribe(res => {
        let data = res.data;
        let cryptoDetail = new CryptoDetail(data.id, data.rateUsd, data.symbol);
        this.cryptoDetails.push(cryptoDetail);

      })
    }
  }

推荐阅读