输入的数字将通过将变量从 page.html 传递到 services.ts 添加到 API URL Key 值

Posted 2023-03-13

【中文标题】输入的数字将通过将变量从 page.html 传递到 services.ts 添加到 API URL Key 值

【英文标题】：Inputted number will add to API URL Key value via passing variable from page.html to services.ts

【发布时间】：2020-08-22 06:45:24

【问题描述】：

我是 Ionic、Angular 和 Typescript 的新手，输入的数字是否有可能作为键值之一添加到 API URL？我在 Key event filtering (with key.enter) 下关注了这个guide

这是我的页面.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>

这是我的示例 API URL。

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

这是我的页面.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，用于从我的 API url 获取数据。

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);
    

如何将我在 page.html 上的输入中的变量传递给 services.ts？可能吗？所以在我的 services.ts 中

myNum = 从我的 html.page 上的 ion-input 输入的数据

【参考方案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

只需使用 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));

这是demo code on stackblitz。当然，由于 api url 不存在，http 请求不会成功，但是您可以在网络调试器中看到它正在发送所有参数

【讨论】：

谢谢！但它只在控制台中更新，而不是在 UI 中它不会在 UI 中显示数据

哦，没关系，我明白了，我只需要将我的数据放在 OnEnter() 下的数组中。谢谢！

是的，我不知道你有什么样的数据。很高兴你成功了

【参考方案2】：

据我了解，您正在更新myNum，但apiUrl 保持不变。

要解决这个问题，您可以将 apiUrl 设为计算属性，如下所示：

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

这将确保使用更新 myNum 值计算 URL，而不是在服务初始化期间仅设置一次。

此外，您可能需要确保正确编码此参数以在 URL 中使用。如果它是一个数字 - 您可以通过将 type="number" 添加到您的 <ion-input> 来强制它。或者在将其添加到 URL 之前使用 encodeURIComponent。

【参考方案3】：

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

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

console.log(u);

【讨论】：

如何应用这个？ :)

虽然此代码可能会为问题提供解决方案，但最好添加有关其工作原理/方式的上下文。这可以帮助未来的用户学习并将这些知识应用到他们自己的代码中。解释代码时，您也可能会以赞成票的形式从用户那里获得积极的反馈。