Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/382.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 角度分量返回未定义的值_Javascript_Angular_Return_Undefined_Angular Services - Fatal编程技术网

Javascript 角度分量返回未定义的值

Javascript 角度分量返回未定义的值,javascript,angular,return,undefined,angular-services,Javascript,Angular,Return,Undefined,Angular Services,我有一个服务文件,它返回两个带有API和数组数据的函数。在构造函数中的一个组件内,我启动了一个服务并尝试在组件中的单元上检索数据,第一个API函数返回数据,并且console.log没有问题,但是第二个函数getRatings()在console.log中返回未定义的数据。为什么? import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Http

我有一个服务文件,它返回两个带有API和数组数据的函数。在构造函数中的一个组件内,我启动了一个服务并尝试在组件中的单元上检索数据,第一个API函数返回数据,并且console.log没有问题,但是第二个函数
getRatings()
在console.log中返回未定义的数据。为什么?

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);
      }
    getRatings() {
           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
            },
            {
                imageUrl: "http://loremflickr.com/150/150?random=2",
                productName: "Product 2",
                releasedDate: "October 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: 2,
                numOfReviews: 12
            },
            {
                imageUrl: "http://loremflickr.com/150/150?random=3",
                productName: "Product 3",
                releasedDate: "July 30, 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: 5,
                numOfReviews: 2
            }];
        }
      }

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>
    </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)
    }
}
从'@angular/core'导入{Injectable};
从'@angular/common/http'导入{HttpClient};
从'@angular/common/http'导入{HttpClientModule};
进口“rxjs/Rx”;
@可注射()
出口类产品服务{
结果:有;
评级:任何;
构造函数(私有http:HttpClient){}
getProducts(){
返回此.http.get('https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH,IOT,TRX&tsyms=USD').map(result=>this.result=result);
}
getRatings(){
返回
[
{
图像URL:“http://loremflickr.com/150/150?random=1",
产品名称:“产品1”,
发布日期:“2016年5月31日”,
描述:“这是一个自由的世界,在孕妇的肚子里。这是一个自由的世界。这是一个自由的世界。这是一个充满活力的世界,这是一个充满活力的世界,
评级:4,
numOfReviews:2
},
{
图像URL:“http://loremflickr.com/150/150?random=2",
产品名称:“产品2”,
发布日期:“2016年10月31日”,
描述:“这是一个自由的世界,在孕妇的肚子里。这是一个自由的世界。这是一个自由的世界。这是一个充满活力的世界,这是一个充满活力的世界,
评级:2,
numOfReviews:12
},
{
图像URL:“http://loremflickr.com/150/150?random=3",
产品名称:“产品3”,
发布日期:“2016年7月30日”,
描述:“这是一个自由的世界,在孕妇的肚子里。这是一个自由的世界。这是一个自由的世界。这是一个充满活力的世界,这是一个充满活力的世界,
评级:5,
numOfReviews:2
}];
}
}
从'@angular/core'导入{Component};
从“./product.service”导入{ProductService};
从“/rating.component”导入{RatingComponent};
@组成部分({
选择器:“加密”,
样式URL:['./app.component.css'],
模板:`
{{crypto}}
{{cryptos[crypto].USD |货币:'USD':true}

` }) 导出类加密组件{ objectKeys=Object.keys; 密码:任何; 评级:任何; 构造函数(私有数据:ProductService){ } 恩戈尼尼特(){ 这是。_data.getProducts() .订阅(res=>{ this.cryptos=res; 控制台日志(res); }); this.ratings=this.u data.getRatings(); console.log(此为.ratings); } onClick($event){ console.log(“Clicked”,$event) } }
在您的
getRatings
服务方法开始时,更改:

getRatings() {
  return
  [
  // ...
致:


解释:分号在某些情况下隐式出现在行尾。在您的情况下,您的代码被解释为只返回
return和以下代码将被忽略。

getRatings
服务方法的开头,更改:

getRatings() {
  return
  [
  // ...
致:


解释:分号在某些情况下隐式出现在行尾。在您的情况下,您的代码被解释为只返回
return并且忽略以下代码。

您可能必须构造数组:const response=new array();您可能必须构造数组:const response=new array();