Как я могу использовать некоторые жестко закодированные данные вместе с API в одном сервисе Anglular 2? - PullRequest
Новая
       47

Как я могу использовать некоторые жестко закодированные данные вместе с API в одном сервисе Anglular 2?

0 голосов
/ 26 октября 2018

У меня есть сервис, который извлекает данные из API и отображает их в моем компоненте.Все хорошо, но вместе с данными из API, которые я отображаю в компоненте, я также хочу отобразить некоторые жестко закодированные данные массива из того же сервиса в том же компоненте.(Жестко закодированные данные будут фактически отображаться в другом компоненте, а затем вкладываться в компонент, который я использую для отображения данных API.)

Служба: 

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { HttpClientModule } from '@angular/common/http';
import 'rxjs/Rx';


@Injectable()
export class ProductService{
  result:any;
  ratings:any;
  constructor(private http: HttpClient) {}
    getProducts() {
        return this.http.get('https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH,IOT,TRX&tsyms=USD').map(result => this.result = result);
        /*return
           [
            {
                imageUrl: "http://loremflickr.com/150/150?random=1",
                productName: "Product 1",
                releasedDate: "May 31, 2016",
                description: "Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.",
                rating: 4,
                numOfReviews: 2
            },

, как вы можете видеть после возврата,У меня есть некоторый закомментированный массив.Я использую rating компонент: 

import { Component, Input } from '@angular/core'

@Component({
    selector: 'rating',
    templateUrl: 'rating.component.html',
    styles: [`
        .glyphicon-star {
            color: blue;
        }
    `]
})
export class RatingComponent{

    @Input('rating-value') rating = 0;
    @Input() numOfReviews = 0;

    onClick(ratingValue){
        this.rating = ratingValue;
    }
}

И затем я хочу отобразить компонент рейтинга с данными массива из сервиса в крипто-компоненте: 

import { Component } from '@angular/core';
import { ProductService } from './product.service';
import { RatingComponent } from './rating.component';
@Component({
  selector: 'crypto',
  styleUrls: ['./app.component.css'],
  template: `<div *ngIf="cryptos">
    <div id="crypto-container" *ngFor="let crypto of objectKeys(cryptos)">
      <span class="left">{{ crypto }}</span>
      <span class="right">{{ cryptos[crypto].USD | currency:'USD':true }}</span>
      <br />
      <rating
          [rating-value]="rating"
          [numOfReviews]="numOfReviews">
      </rating>
    </div>
  </div>`
})
export class CryptoComponent {
  objectKeys = Object.keys;
cryptos: any;
ratings: any;

constructor(private _data: ProductService) {

}

ngOnInit() {
  this._data.getProducts()
    .subscribe(res => {
      this.cryptos = res;

      console.log(res);

    });
}

    onClick($event){
      console.log("Clicked",$event)
    }
}

Как-то так, но этоне работает: 

<rating
      [rating-value]="rating"
      [numOfReviews]="numOfReviews">
</rating>

Как я могу вернуть HTTP-запрос на получение от API и жестко закодированные данные массива для данных рейтингов в той же службе, а затем получить доступ к данным рейтинга из массива в crypto.component.ts внутри селектора <rating> безполучать неопределенные ошибки?Теперь это выглядит так:

enter image description here

Извините, если объяснение неясно, я просто пытаюсь добавить систему оценки по звездам в компонент, который отображаетсяданные из сервиса, который получает данные из API.API предоставляет только криптографическое имя и цену.Данные для компонента звездной оценки были бы жестко закодированы внутри массива самостоятельно.

1 Ответ

0 голосов
/ 26 октября 2018

Обслуживание продукта следующим образом: 

return this.http.get('https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH,IOT,TRX&tsyms=USD')
  .map(result => {
    Object.keys(result).forEach(value => {

      // add logic to have each crypto a different rating

      result[value]['ratingInfo'] = {
        imageUrl: "http://loremflickr.com/150/150?random=1",
        productName: "Product 1",
        releasedDate: "May 31, 2016",
        description: "Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.",
        rating: 4,
        numOfReviews: 2
      }
    });
    return result;
  });

Затем обновите свой крипто-компонент следующим образом: 

<div *ngIf="cryptos">
<div id="crypto-container" *ngFor="let crypto of objectKeys(cryptos)">
  <span class="left">{{ crypto }}</span>
  <span class="right">{{ cryptos[crypto].USD | currency:'USD':true }}</span>
  <br />
  <rating
      [rating-value]="cryptos[crypto].ratingInfo.rating"
      [numOfReviews]="cryptos[crypto].ratingInfo.numOfReviews">
  </rating>
</div>

Существуют лучшие и более чистые способы достижения того, чтоВы хотите, но требует небольшого рефакторинга вашего кода.

...