Question

我正在尝试使用牛津词典API实现个人词典：https://developer.oxforddictionaries.com/documentation

我创建了一个proxy.conf.json文件来实现API调用，这里是代码：

{
    "/oxfordapi": {
      "target": "https://od-api.oxforddictionaries.com/api/v1/entries/en/",
      "secure": true,
      "changeOrigin": true,
      "logLevel": "debug",
      "headers": {
        "Accept": "application/json",
        "app_id": "933daf11",
        "app_key": "34bef88a5c41a2d98f35d8783c887ec0"
      },
      "pathRewrite": {"^/oxfordapi" : ""}
    }
  }

现在我尝试使用服务从我的组件文件中调用它：

component.ts:

    ngOnInit() {

               this.gotHttpService.getDictonaryData().subscribe(
                  data => {

                    this.dictData = data;
                    console.log(this.dictData);

                  } ,
                  error => {
                    console.log("some error occured");
                    console.log(error.errorMessage);
                  }
                );



      }

这是service.ts文件：

export class GotHttpService {
  word: String = "aardvark";
  constructor(private _http: HttpClient) {
    console.log("BlogHttpService is called")
      }
      private handleError(err: HttpErrorResponse) {
        console.log("Handle error Http calls")
        console.log(err.message);
        return Observable.throw(err.message);
      }
              getDictonaryData(): any {
                let myResponse = this._http.get('/oxfordapi/' + this.word);
                return myResponse;

              }
}

component.html：

  <input id="name" type="text" [(ngModel)]="name" />

但是如何通过从输入ngmodel中获取单词并将其传递给getDictonaryData（）方法以获取单词相关数据来进行api调用。

高度赞赏任何类型的建议。这也是使用angular获取牛津字典API数据的唯一方法吗？

Answer 1

<input id="name" type="text" [(ngModel)]="name" (change)="getDictonaryData()"/>

component.ts：

getDictonaryData() {
// Do code to fetch from this.dictData
}

Answer 2

以下是steps和code所需的解决方案：

<强>步骤：

您的[(ngModel)]="name"会将该字词存储在this.name
当您点击按钮getData()时，将调用哪个方法将this.name发送到服务功能
在您的服务中，使用名称参数，如果存在名称，则发送名称getDictonaryData(name?)

<强>代码：

<强> HTML：

<input id="name" type="text" [(ngModel)]="name"/>
<button (click)="getData()"> Get Data </button>

<强>组件：

getData() {
    this.gotHttpService.getDictonaryData(this.name).subscribe(
        data => {
            this.dictData = data;
            console.log(this.dictData);
        } ,
        error => {
            console.log("some error occured");
            console.log(error.errorMessage);
        }
    );

}

<强>服务

export class GotHttpService {
    word: String = "aardvark";
    constructor(private _http: HttpClient) {
        console.log("BlogHttpService is called")
    }
    private handleError(err: HttpErrorResponse) {
        console.log("Handle error Http calls")
        console.log(err.message);
        return Observable.throw(err.message);
    }
    getDictonaryData(name?): any {
        if(name){
            this.word = name
        }
    let myResponse = this._http.get('/oxfordapi/' + this.word);
    return myResponse;

    }
}

Answer 3

<input id="name" type="text" [(ngModel)]="name" (change)="getDictonaryData()"/>

//pass name parameter into your service function like below

component.ts:
    name:string;
    ngOnInit() {

               this.gotHttpService.getDictonaryData(this.name).subscribe(
                  data => {

                    this.dictData = data;
                    console.log(this.dictData);

                  } ,
                  error => {
                    console.log("some error occured");
                    console.log(error.errorMessage);
                  }
                );



      }
//pass parameter in your service function also like below 

export class GotHttpService {
  word: String = "aardvark";
  constructor(private _http: HttpClient) {
    console.log("BlogHttpService is called")
      }
      private handleError(err: HttpErrorResponse) {
        console.log("Handle error Http calls")
        console.log(err.message);
        return Observable.throw(err.message);
      }
              getDictonaryData(word:any): any {
                let myResponse = this._http.get('/oxfordapi/' + word);
                return myResponse;

              }
}

来自角应用的牛津词典API调用？

3 个答案: