httpClient Angular 到 PHP 数据发送问题

Question

我有一个我正在尝试做的小项目，一些用户可以将一些数据输入到文本框中，然后发送到 php 服务器，我以前没有使用 angular 当我之前让它工作时，但现在我正在尝试一起使用 angular 和 php。

我的问题是，一旦我单击 "submit"，发送到 .txt 文件的数据要么使用 $_POST 打印 'array'，要么使用 $_HTTP_RAW_POST_DATA 不打印任何内容.

app.component.ts:

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
 data: string;
 userInput: any;
 @ViewChild('toSend') input: ElementRef;

 constructor(private http: HttpClient) {
 }
  toSend = JSON.stringify(this.input);
  ngOnInit(): void {

  }

  postData() {
  const newInput = {
    text: this.input.nativeElement.value
   };
  console.log(this.input.nativeElement.value);
  this.http.post('http://localhost:81/test.php', this.toSend)
  .subscribe(
    res => {
      console.log(res);
     }
    );
  }

   requestData() {
   this.http.get('http://localhost:81/test.php').subscribe(
      data => {
        const myJSON = JSON.stringify(data);
        console.log(myJSON);
      }
     );
   }
}

php:

<?php

echo $_POST;

$myfile = fopen("TestingOut.txt", "a++") or die("Unable to open file!");
$txt = $HTTP_RAW_POST_DATA."\r\n";
fwrite($myfile, $txt);
fclose($myfile);
?>

app.component.html:

 <div style="text-align: center; padding-top: 10px">
 <input    type="text"
        id="inputText"
        placeholder="Insert Input"
        #toSend
        >
    <p></p>
  <button type='submit' (click)='postData()' >Submit Data</button>
  <br>
  <hr>
  <button (click)='requestData()'>Request Data</button>
</div>

Answer 1

如果您使用 @viewChild 访问 DOM 元素，您需要等待 AfterViewInit 生命周期挂钩来访问变量，因为这是子组件，DOM元素和指令变得可用。但在您的情况下不需要，因为您使用的是模板引用变量，您可以使用 toSend.value

将输入控件的值作为参数传递给 post 数据方法

   <div style="text-align: center; padding-top: 10px">
     <input    type="text"
            id="inputText"
            placeholder="Insert Input"
            #toSend
            >
        <p></p>
      <button type='submit' (click)='postData(toSend.value)' >Submit Data</button>
      <br>
      <hr>
      <button (click)='requestData()'>Request Data</button>
    </div>

分量：

import { Component, OnInit, ViewChild, ElementRef,AfterViewInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit,AfterViewInit{
 data: string;
 userInput: any;
 toSend:any
 @ViewChild('toSend') input: ElementRef;

 constructor(private http: HttpClient) {
 }

  ngOnInit(): void {

  }
  ngAfterViewInit() {
       this.toSend=this.input
 }
  postData(value) {

  this.http.post('http://localhost:81/test.php', value)
  .subscribe(
    res => {
      console.log(res);
     }
    );
  }

   requestData() {
   this.http.get('http://localhost:81/test.php').subscribe(
      data => {
        const myJSON = JSON.stringify(data);
        console.log(myJSON);
      }
     );
   }
}

或者，如果您想使用 @viewChild，则需要使用 observable。

  import {Observable,fromEvent} from 'rxjs'; 
    import {pluck} from 'rxjs/operators
    export class Appcomponent implements OnInit,AfterViewInit{
    @ViewChild('toSend') input: ElementRef;
    Input$:Observable<any>;
     toSend:any
    ngAfterViewInit() {
           this.Input$=fromEvent(this.input.nativeElement,'input');
           this.Input$.pipe(pluck('target','value')).subscribe(value=>{
            this.toSend=value;
            console.log(this.data)});
         }

    postData() {

      console.log(this.input.nativeElement.value);
      this.http.post('http://localhost:81/test.php', this.toSend)
    }

fromEvent: 将事件转化为可观察序列
pluck:Select 要发出的属性。

httpClient Angular 到 PHP 数据发送问题

httpClient Angular to PHP data sending issue

php

angular

angular-httpclient