代码之家 › 专栏 › 技术社区 › Limpuls

如何使每个角度分量具有不同的数组值

for-loop angular arrays javascript

Limpuls · 技术社区 · 7 年前

getProducts() {
        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
      var ratings = [{rating: 4, numOfReviews: 2}, {rating:5, numOfReviews: 3}, {rating:6, numOfReviews:1}];
      for(var i = 0; i < ratings.length; i++) {
        result[value]['ratingInfo'] = ratings[i].rating;
        result[value]['ratingInfo'] = ratings[i].numOfReviews;
      }

    /*  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;
  });
}

加密组件.ts

import { Component } from '@angular/core';
import { ProductService } from './product.service';
import { RatingComponent } from './rating.component';
@Component({
  selector: 'crypto',
  styleUrls: ['./app.component.css'],
  template: `<h2 class="header">Crypto Price Compare</h2>
    <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>
  </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);
    });

  //this.ratings = this._data.getRatings();
    console.log(this.ratings);


}

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

2 回复 | 直到 7 年前

SiddAjmera 7 年前

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';

@Injectable()
export class ProductService {

  constructor(private http: HttpClient) { }
  ...
  getProducts() {

    const ratings = [
      { rating: 4, numOfReviews: 2 }, 
      { rating: 5, numOfReviews: 3 }, 
      { rating: 6, numOfReviews: 1 },
      { rating: 7, numOfReviews: 4 }
    ];

    return this.http.get('https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH,IOT,TRX&tsyms=USD')
      .pipe(
        map(
          cryptos => {
            const currencies = [];
            let index = 0;
            return Object.keys(cryptos).map((cryptoName, index) => {
              return {
                name: cryptoName,
                price: cryptos[cryptoName].USD,
                ratingInfo: { ...ratings[index] }
              }
            });
          }
        )
      )
  }
  ...
}

这样做会导致 getProducts() Array 可以在视图中简单循环的对象。

在CryptosComponent模板中,可以执行以下操作:

<h2 class="header">Crypto Price Compare</h2>
  <div *ngIf="cryptos">
  <div id="crypto-container" *ngFor="let crypto of cryptos">
    <span class="left">{{ crypto.name }}</span> - 
    <span class="right">{{ crypto.price | currency:'USD' }}</span>
    <br />
    <rating
      [ratingValue]="crypto.ratingInfo.rating"
      [numOfReviews]="crypto.ratingInfo.numOfReviews">
    </rating>
  </div>
</div>

我改了一个名字 rating-value 到 ratingValue .
pipe 我穿过了接线员。如果你使用的是角度4或5,你需要像现在这样做,通过链接 .map 到可观察值。

这里有一个 Sample StackBlitz 供参考。

user2263572 7 年前

不知道你到底想做什么,但这没有意义。

result[value]['ratingInfo'] = ratings[i].rating;
result[value]['ratingInfo'] = ratings[i].numOfReviews;

您正在设置ratingInfo并立即用其他内容覆盖它。假设ratingInfo是一个对象,您可能需要这样的内容:

result[value]['ratingInfo']['rating'] = ratings[i].rating;
result[value]['ratingInfo']['numOfReviews'] = ratings[i].numOfReviews;

或者更简单地说:

result[value]['ratingInfo'] = ratings[i]