Angular 8 HTTP POST nothing happening when I click the button to execute function

Question

All I'm trying to do is send a POST to the server of the form data, and I tried doing it with Observables, and promises, and xmlhttprequest. Using newest Angular with Ionic, driving me nuts because the I either call the function right when it starts and the POST works but no data will be ready on the form. Or I dont call the POST right away and I click the button after data is filled in the form and nothing happens. I am at a complete loss. I looked at all of the tutorials and different versions. I am not trying to create an API wrapper as a service and inject it. All I need is a simple POST here when the user clicks on the button after they filled in a phone number. I would prefer to do it with an Observable to learn Angular better. But something is messed up here and I am at a loss. I included different versions that I have tried at the top of the code.

 /*
      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修饰符