Как я могу перезаписать данные существующего компонента в Angular? - PullRequest
0 голосов
/ 03 июля 2019

Я пытаюсь написать веб-приложение, которое отслеживает цену различных криптовалют в качестве упражнения для изучения Angular.

На данный момент мне удалось возвращать значения из API каждые 5 секунд и отображать новые данные на экране. Проблема заключается в том, что при вызове API новые данные используются для создания новых компонентов. Это означает, что каждые 5 секунд создаются 3 новых компонента. Вместо этого я хочу, чтобы существующие компоненты были перезаписаны их новыми значениями.

Чтобы сделать это, я чувствую, что сначала мне нужно создать компоненты, а не использовать директиву *ngFor для их динамического создания. Но я не совсем уверен, как я поступаю по этому поводу.

Шаблон HomeComponent

<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>

Класс HomeComponent

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 Class

export class TickerRowComponent implements OnInit, OnChanges {

  @Input() cryptoDetail: CryptoDetail

  currentRate: string;

  constructor() { }

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

}

1 Ответ

0 голосов
/ 03 июля 2019

Когда вы подписываетесь на ваш cryptoService через каждые 5 секунд, вы помещаете новую деталь шифрования в массив 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);

      })
    }
  }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...