如何在 Angular 2 的同一服务中将一些硬编码数据与 API 一起使用？

Posted 2023-03-13

【中文标题】如何在 Angular 2 的同一服务中将一些硬编码数据与 API 一起使用？

【英文标题】：How can I use some hardcoded data together with API in the same service in Anglular 2?

【发布时间】：2019-03-30 14:35:59

【问题描述】：

我有一项服务，它从 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>

如何在同一服务中返回来自 API 的 HTTP 获取请求和硬编码数组数据以获取评级数据，然后从 crypto.component.ts 内的 <rating> 选择器中的数组访问评级数据而不会出现未定义的错误？现在看起来像这样：

抱歉，如果解释不清楚，我只是想将星级评分系统添加到显示来自服务数据的组件，该服务正在从 API 获取数据。 API 仅提供加密名称和价格。星级组件的数据将在我自己的数组中进行硬编码。

【参考方案1】：

产品服务如下：

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>

有更好、更简洁的方法来实现您想要的，但需要对您的代码进行一些重构。

【讨论】：

谢谢，它有效。但我不知道['ratingInfo'] 来自哪里？

['ratingInfo'] 是动态创建的，如果 result[value] 处的对象没有名为 'ratingInfo' 的属性，则 javascript 创建此新属性并将评级对象 imageUrl:... 分配给它（您可以说像 1) 中的 2 个步骤