Введенное число будет добавлено к значению API URL Key путем передачи переменной со страницы. html в services.ts

Question

Я новичок в Ioni c, Angular и Typescript, возможно ли, что введенное число будет добавлено к URL-адресу API как одно из значений ключа? Я следовал этому руководству в разделе Фильтрация ключевых событий (с key.enter)

Вот моя страница. html

    <ion-input placeholder="Number" [(ngModel)]="myNum"  (keyup.enter)="onEnter()"></ion-input>

  <ng-container *ngIf="!error; else errorContent">

    <p *ngFor="let order of orders; let i=index;">
      <ion-item *ngIf="i==0">Number : <b>{{ order?.Number }}</b></ion-item>

      <ion-item class="listDetails">

        <p class="listTitle">
          {{order?.status }}
          <br />
          <a>
            {{ order?.date | date: 'MMM dd, yyyy' }}
            <br />
            {{ order?.time }}
          </a>
        </p>

        <p class="listComment">
          {{ order?.comment }}
        </p>

      </ion-item>

и вот мой пример URL-адреса API.

'https://myapi.com/FoodDeliveryTracking?&userName=myuser&password=mypass&MyNumber=' + myNum

Вот моя page.ts

constructor(private dataService: DataService, private http: HttpClient) {
  this.data = '';
  this.error = '';
 }


orders= [];
ionViewWillEnter() {
  // Load the data
  this.dataService.getRemoteData(this.myNum).subscribe( //comment this if you will use local data
    data => {
      // Takes data into in single Array and print 
      this.orders = data.output.Result.FoodOrderTracking;
    },
    err => {
      // Set the error information to display in the template
      this.error = `An error occurred, the data could not be retrieved: Status: ${err.status}, Message: ${err.statusText}`;
    }
  );
}

    this.dataService.getRemoteData(this.myNum).subscribe(data => {
      console.log("Remote Data:");
      console.log(data);
    });
  }

  onEnter () {

    this.dataService.getRemoteData(this.myNum).subscribe(data=>
    {
      console.log('data', data)
    })
  }   

Вот мои data.services. ts, который предназначен для получения данных с моего URL-адреса API.

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  myNum = ''
  onEnter (docNum: string) {this.myNum = myNum}
  apiUrl = 'http://127.0.0.1:8080/https://myapi.com/FoodDeliveryTracking?&userName=myuser&password=mypass&MyNumber='+myNum';
  apiKey = ''; // <-- Enter your own key here!



    constructor(private http: HttpClient){}


    getRemoteData(){
      let headers = new HttpHeaders({'apiKey': this.apiKey});
      headers.append('Accept','application/json');
      headers.append('X-Requested-With','XMLHttpRequest');
      headers.append('content-type','application/json');
      return this.http.get(this.apiUrl, {headers: headers});
    }


}

Как передать переменную из моего ввода на моей странице. html в services.ts? Является ли это возможным? Так что в my services.ts

myNum = Данные, введенные с ионного ввода на моей html .page

Answer 1

Попробуйте это

Используйте привязку данных в вашем html шаблоне

 <ion-input placeholder="Number" [(ngModel)]="myNum"  (keyup.enter)="onEnter()"></ion-input>

component.ts

Измените onEnter на вашей странице для вызова службы

onEnter () {

  this.dataService.getRemoteData(this.myNum).subscribe(data=>
  {
    console.log('data', data)
  })
}   

dataservice.ts

Просто используйте базовый URL для API

 apiUrl = 'http://127.0.0.1:8080/https://myapi.com/FoodDeliveryTracking';

Измените getRemoteData, чтобы использовать HttpParams для отправки параметров запроса.

getRemoteData(myNum: string){
    let headers = new HttpHeaders({'apiKey': this.apiKey});

    //Set query string parameters
    let params = new HttpParams()
    .set('MyNumber', myNum) 
    .set('userName','myuser')
    .set('password','mypass');

    return this.http.get(this.apiUrl, {headers, params}).subscribe(data =>console.log('data', data));
}

Вот демонстрационный код на stackblitz . Конечно, http-запрос не выполняется, поскольку URL-адрес api не существует, но вы можете видеть в сетевом отладчике, что он отправляет все параметры

Answer 2

Насколько я понимаю, вы обновляете myNum, но apiUrl остается прежним.

Чтобы исправить это, вы можете сделать apiUrl вычисляемым свойством, например:

get apiUrl () {
  return 'http://127.0.0.1:8080/https://myapi.com/FoodDeliveryTracking?&userName=myuser&password=mypass&MyNumber=' + this.myNum';
}

Это позволит убедиться, что URL-адрес вычисляется с использованием обновлений myNum значения, в отличие от простой установки его один раз во время инициализации службы.

Кроме того, вы можете убедиться, что этот параметр правильно закодирован для использования в URL. Если это число - вы можете просто принудительно добавить type="number" к своему <ion-input>. Или используйте encodeURIComponent перед добавлением его в URL.

Answer 3

let myParams = {'foo': 'hi there', 'bar': '???'};

let u = new URLSearchParams(myParams).toString();

console.log(u);