当我单击按钮执行功能时，Angular 8 HTTP POST 没有任何反应

Question

我要做的就是向表单数据的服务器发送一个 POST，我尝试使用 Observables、promise 和 xmlhttprequest 来做这件事。使用最新的 Angular 和 Ionic，让我发疯，因为我要么在函数启动时立即调用该函数，并且 POST 工作，但表单上没有准备好数据。或者我没有立即调用 POST，而是在表单中填写数据后单击按钮，但没有任何反应。我完全不知所措。我查看了所有的教程和不同的版本。我不想将 API 包装器创建为服务并注入它。当用户在填写电话号码后单击按钮时，我需要的只是一个简单的 POST。我更愿意使用 Observable 来更好地学习 Angular。但是这里出了点问题，我不知所措。我在代码顶部包含了我尝试过的不同版本。

 /*
      this.http.post("https://www.example.com/ap/call",
          {
              "courseListIcon": "...",
              "description": "TEST",
              "iconUrl": "..",
              "longDescription": "...",
              "url": "new-url"
          })

     */



  //this.http.request("POST","https://www.example.com/ap/call",{responseType:"json"})

 //   this.http.post<any>('https://www.example.com/ap/call', JSON.stringify({hello: "hi"}),  this.httpOptions)

 /*   this.http.post("https://www.example.com/ap/call",
{
"name":  "Customer004",
"email":  "customer004@email.com",
"tel":  "0000252525"
})
.subscribe(
data  => {
console.log("POST Request is successful ", data);
},
error  => {

console.log("Error", error);

}

);*/

    <ion-toolbar color="primary">

        <ion-title>
            AP



        </ion-title>
    </ion-toolbar>



    <ion-content><ion-card>
        <ion-card-header>
            <ion-card-title>Call & Record</ion-card-title>
        </ion-card-header>

    <ion-item ><ion-label>Enter a phone number below</ion-label></ion-item>

    <ion-input type="number" [(ngModel)]="uNumber"></ion-input>
        <ion-button expand="full" fill="solid" (click)="sendR()">Record</ion-button>
    </ion-card>

        <ion-card><ion-card-header><ion-card-title>Contacts Search</ion-card-title></ion-card-header>

    <ion-searchbar show-cancel-button="always"></ion-searchbar>
</ion-card></ion-content>
<ion-tabs style="margin-top: -175px">
    <ion-tab-bar slot="bottom">


        <ion-tab-button tab="storage">
            <ion-icon name="search"></ion-icon>
            <ion-label>Storage</ion-label>
        </ion-tab-button>



        <ion-tab-button tab="settings">
            <ion-icon name="settings"></ion-icon>
            <ion-label>Settings</ion-label>

        </ion-tab-button>

    </ion-tab-bar>
        </ion-tabs>

import { Component, OnInit } from '@angular/core';
import { CallNumber } from '@ionic-native/call-number/ngx';
import { SMS } from '@ionic-native/sms/ngx';
import { ToastController } from '@ionic/angular';
import { Contacts, Contact, ContactName, ContactField } from '@ionic-native/contacts/ngx';
import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';

@Component({
  selector: 'app-call',
  templateUrl: './call.page.html',
  styleUrls: ['./call.page.scss'],
})

export class CallPage  {

  myContacts: Contact[] = [];
uNumber: string;




  constructor(private http: HttpClient, private contacts: Contacts, private callNumber: CallNumber, private sms: SMS, private toastCtrl: ToastController) {
  }

  ngOnInit() {

  }


  async sendR() {  console.log('this.unumber'); console.log(this.uNumber);
  if(this.uNumber !== undefined){
    var xhr4 = new XMLHttpRequest();
    var p ='https://www.example.com/ap/call';

    xhr4.open('POST', p, true);
    xhr4.onreadystatechange = function() {
      console.log(p +' shit happened');

    };
    xhr4.setRequestHeader("Content-type", "application/json");
    xhr4.send(JSON.stringify({number: this.uNumber}))
  }


  }


    sendSms(contact: Contact){
      this.sms.send(contact.phoneNumbers[0].value, 'this is my predefined message to you!');
    };
      call(contact: Contact){
      this.callNumber.callNumber(contact.phoneNumbers[0].value, true);

    };


    loadContacts() {
      let options = {
        filter: '',
       // multiple: true,
        hasPhoneNumbers: true,
      };

      this.contacts.find(['*'], options).then((contacts: Contact[]) =>{
        this.myContacts = contacts;
        console.log('Contacts: ', contacts);
      })
    };
}
     ```

Answer 1

删除sendR()前面的async修饰符