首页 文章

在另一个API中存储从API检索的数据 - 离子

提问于
浏览
2

我是Ionic的初学者 . 我有2个API用于我的表单 . 第一个API用于检索用户的名称 . 我能够检索名称并将其显示在标签中 .

代码如下:

我的提供者(第一个API)

getStaff(){
return this.http.get<StaffRecords>(`${this.staffApiUrl}//some api,
  {headers: new HttpHeaders().set('X-XSRF-TOKEN', this.getCookie('XSRF-TOKEN'))});}

我的页面的.ts文件(第一个API)

ionViewDidLoad(){

this.christmasProvider.getStaff().pipe(
  map((staffResult: StaffRecords) => staffResult && staffResult.records)
).subscribe(staffed => {
  if (staffed){
    this.storage.set('staff', staffed);
    this.staff = staffed;
    console.log(staffed);
  }
});}

我在此表单中使用的第二个API用于发布用户输入 . 目前,我可以将用户输入数据发布到API中 . 但是,我不知道如何获取从第一个API检索到的数据,并将其与所有其他字段一起发布到我的第二个API中 . 基本上,我需要使用从第一个API(称为“display_name”)检索到的数据并将其发布到我的第二个API(称为“dedicated_by_name”)中的字段中 .

代码如下:我的提供者(第二API)

updateDedication(pledge_amount: number, phone_no: string, sing_to: string, dedicated_datetime: string, sing_to_department: string, location: string, song: string, other_song_request: string, special_request: string, message: string, remain_anon: number, status: string){
return Observable.create(observer => 
  this.http.post(`${this.dataApiUrl}//some api`,
    { records: [{ 
      //"dedicated_by_name": dedicated_by_name,
      "pledge_amount": pledge_amount, 
      "phone_no": phone_no, 
      "sing_to": sing_to,
      "dedicated_datetime": dedicated_datetime, 
      "sing_to_department": sing_to_department, 
      "location": location, 
      "song": song, 
      "other_song_request": other_song_request, 
      "special_request": special_request, 
      "message": message, 
      "remain_anon": remain_anon, 
      "status": status}],
      resource_id: '//some api' },
    { headers: new HttpHeaders().set('X-XSRF-TOKEN', this.getCookie('XSRF-TOKEN')),
      responseType: 'text'})
  .subscribe(data => {
    console.log(data);
    observer.next(true);
    observer.complete();
  }, error => {
    console.log(error);
    observer.next(false);
    observer.complete();
  })
);}

我的页面的.ts文件(第2个API)

gotoConfirmpage(){
this.submitAttempt = true;
console.log("Success!");
console.log(this.dediForm2.value);

var obj = this.dediForm2.value;
//console.log(dedicated_by_name);

this.christmasProvider.updateDedication(obj.pledge_amount, obj.phone_no, obj.sing_to, obj.dedicated_date+"T"+obj.dedicated_time+":00", obj.sing_to_department, obj.location, obj.song, obj.other_song_request, obj.special_request, obj.message, obj.remain_anon, this.status)
.subscribe((allowed => {
    //this.submit_error = false;
    //this.submit_success = true;
    console.log(allowed);
    //console.log(obj.dedicated_by_name);
  }
));

//push to confirm page
this.navCtrl.push(SongDediCfmPage);}

表单的HTML(我包括第一个api的部分和第二个api的第一个字段)

第一个API的HTML

<ion-content padding>
<p *ngIf="submitAttempt" style="color: #ea6153">Please fill out all fields!</p>
<form [formGroup]="dediForm2">
  <h6 style="font-weight: bold" id="dedititle">My Dedication</h6>
  <ion-card color="secondary">
    <ion-list>
      <ion-item>
        <ion-icon item-left name="ios-person-outline" style="font-size:30px; width: 20px;"></ion-icon>
        <ion-label *ngFor="let s of staff" style="font-style: italic; font-size: 15px;">{{ s.display_name }}</ion-label>
      </ion-item>

第二个API的HTML(第一个字段仅提交按钮)

<ion-item>
        <ion-icon item-left name="ios-cash-outline" style="font-size:30px; width: 20px;"></ion-icon>
        <ion-input type="number" formControlName="pledge_amount" name="pledge_amount" [class.invalid]="!dediForm2.controls.pledge_amount.valid && (dediForm2.controls.pledge_amount.dirty || submitAttempt)" placeholder="Pledge Amount" style="font-style:italic; font-size: 15px;"></ion-input>
      </ion-item>

      <ion-item *ngIf="!dediForm2.controls.pledge_amount.valid && (dediForm2.controls.pledge_amount.dirty || submitAttempt)">
        <p>Please enter an amount lesser than this.</p>
      </ion-item>

<button ion-button icon-start class="pledgebtn" (click)="gotoConfirmpage()" [disabled]="!dediForm2.valid">
    <img src="assets/imgs/smiley_final.png" class="smileyimg">
    DEDICATE <br>SONG
  </button>
</form>

请指导我如何存储从第一个API检索到的值并将其发布回第二个API . 多谢你们 .

1 回答

  • 0

    我们可以使用switchMap移动两个服务HTTP调用并组合最终结果 . 另外,我们需要遵循这个简单的方法

    getStaff(){
    
    this.christmasProvider.getStaff().pipe(
    
    map((staffResult: StaffRecords) => staffResult && staffResult.records)
    ).subscribe(staffed => {
      if (staffed){
        this.storage.set('staff', staffed);
        this.staff = staffed;
    
        this.christmasProvider.updateDedication(obj.pledge_amount, obj.phone_no, obj.sing_to, obj.dedicated_date+"T"+obj.dedicated_time+":00", obj.sing_to_department, obj.location, obj.song, obj.other_song_request, obj.special_request, obj.message, obj.remain_anon, this.status, staffed)
    .subscribe((allowed => {
            console.log(staffed);
          }
    });}
    

相关问题