Question

即时通讯尝试学习角度5，我试图制作一个简单的项目，使ajax petticion到api并显示结果，一切正常，直到我添加了一个新组件（buscador）与新服务（buscador） .service.ts）。下面是代码：

buscador.component.html

<div class="buscador">
    <form>
        <label for="ciutat">Ciudad:</label>
        <input type="text" #city>
        <button (click)="enterData(city.value)">Buscar</button>
    </form>
</div>

buscador.component.ts

import { Component, OnInit } from '@angular/core';
import { BuscadorService } from './buscador.service';
@Component({
    selector: 'app-buscador',
    templateUrl: 'buscador.component.html'
})

export class Buscador{
    constructor(private value: BuscadorService){}
    enterData(city){
        this.value.setValue(city);
        console.log(city);
    }
}

buscador.service.ts

import { Injectable } from '@angular/core';

@Injectable()
export class BuscadorService {
  constructor(private value: string) { }

  setValue(newValue) {
    this.value = newValue;
    console.log("insertado");
  }

  getValue(){
    return this.value;
  }
}

fetch.component.html

<div class="poblacion row">
    <div class="header column">
        <h4 *ngIf="resposta">{{resposta.location.name}} - {{resposta.location.region}}</h4>
    </div>
    <div class="info column">
        <ul>
            <li *ngIf="!resposta">Cargando...</li>
            <li *ngIf="resposta">Temperatura actual: {{resposta.current.temp_c}}</li>
            <li *ngIf="resposta">Sensacion termica: {{resposta.current.feelslike_c}}</li>
            <li *ngIf="resposta">Condicion: {{resposta.current.condition.text}}</li>
        </ul>
    </div>
</div>

fetch.component.ts

import { Component } from '@angular/core';
import { OnInit } from '@angular/core/src/metadata/lifecycle_hooks';
import { FetchService } from './fetch.service'; 
import { Buscador } from '../buscador/buscador.component';
import { BuscadorService } from '../buscador/buscador.service';

@Component({
    selector: "app-fetch",
    templateUrl: "./fetch.component.html",
    styleUrls: ["./fetch.component.css"]
})
export class Fetch implements OnInit  {
    private url = 'http://api.apixu.com/v1/current.json?key=a456c65a89b44bf8ac6101713161207&q=Girona';
    resposta: any;

    constructor(private http: FetchService,private value:BuscadorService){}



    ngOnInit() {
        var newCity = this.value.getValue();
            if (newCity == null || newCity === 'undefined'){
            this.http.getDataObservable(this.url).subscribe(
                data => this.resposta = data
            );
        }else{
            var urlCity = "http://api.apixu.com/v1/current.json?key=a456c65a89b44bf8ac6101713161207&q=" + newCity;
            this.http.getDataObservable(urlCity).subscribe(
                data => this.resposta = data
            )
        }

        console.log("init correcto!");
    }
}

fetch.service.ts

import { HttpClientModule, HttpClient } from '@angular/common/http'
import { HttpErrorResponse } from '@angular/common/http';
import 'rxjs/add/operator/retry';
import 'rxjs/add/operator/map';

// API: https://www.apixu.com/api-explorer.aspx

@Injectable()
export class FetchService {
  constructor(private http:HttpClient){}
  //Metodo que buscara la ainfo a la api, por parametro recibe la url de la api
  getDataObservable(url:string) {
    return this.http.get(url)
      //Creamos un mapa apartir de los datos recibidos
        .map(data => {
          console.log("Todo correcto! ", data);
          return data;
        },
      //Cazamos errores
        (err: HttpErrorResponse) => {
          if (err.error instanceof Error){
              console.log('Error: ',err.error.message)
          }else{
              console.log(`Status: ${err.status}, Error: ${err.error}`);
          }
      });
  }
}

Answer 1

我认为在您的/[^/]*/([^/]*)中，您尝试通过将其作为参数提供给构造函数来声明字符串值。这不起作用，构造函数参数用于依赖注入（就像在FetchService中的Http注入一样）。所以这就是问题所在。

buscadors.service.ts

您应该在构造函数之外声明此字符串。

constructor(private value: string) { }

错误：StaticInjectorError [String]

1 个答案: