Я пытаюсь написать веб-приложение, которое отслеживает цену различных криптовалют в качестве упражнения для изучения 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;
}
}