Question

我想在组件视图中显示服务现在，我已经从控制台中获取了服务数据并将其打印在控制台中，但是我想在变量或数组中存储相同的数据，并且希望将其分配到组件的视图中

我将代码的详细信息放在下面

Countrycode.service.ts

import { Http } from '@angular/http';
import {Injectable} from '@angular/core';
import { map } from 'rxjs/operators';
@Injectable()
export class CodeCountryService {

  constructor(private http: Http) { }

  getData() {
    return this.http.get('http://country.io/names.json').pipe(map(
     (response) => response.json()
    )).subscribe(

      (data) => console.log(data)
         );

  }
}

我制作了一个模块 countryCode.ts

export interface IcounrtyCode {

    code: string;
    country: string;
}

code-counrty.component.ts

import { Component, OnInit } from '@angular/core';
import { CodeCountryService } from '../services/Contrycode.service';
import {IcounrtyCode} from '../module/countryCode';



@Component({
  selector: 'app-code-country',
  templateUrl: './code-country.component.html',
  styleUrls: ['./code-country.component.css']
})
export class CodeCountryComponent implements OnInit {

  counrtyCode: IcounrtyCode[];

  constructor(private _CodeCountryService: CodeCountryService) { }

  getData() {


  }

  ngOnInit() {
   this.counrtyCode =  this._CodeCountryService.getData();

  }

}

我想获取数据并将其显示在组件视图中

但是在ngOnInit（）函数中初始化counrtyCode时，文件 code-country.component.ts 出现错误

错误是->

[ts]类型“ Subscription”不能分配给类型“ IcounrtyCode []”。
  订阅类型中缺少属性“长度”。

Answer 1

从组件而不是服务中订阅它。从服务中返回可观察对象。

 getData() {
    return this.http.get('http://country.io/names.json').pipe(map(
     (response) => response.json()
    ))

  }

现在在组件内部订阅它。

 this._CodeCountryService.getData().subscribe( 
      (data) => {
       this.counrtyCode = data
  });

Answer 2

为您服务。

 getData() {
   return this.http.get('http://country.io/names.json') 
   .map((response: Response) => response.json())
 }

然后订阅您的组件

 this._CodeCountryService.getData().subscribe((data) => {
 this.counrtyCode = data
}, 
 (error)=>{

});

将服务的价值纳入Component IN Angular的视野

2 个答案: