Question

我有一个小项目，我试图做一些用户可以将一些数据输入文本框然后发送到php服务器，我以前没有使用角度工作之前，我现在正试图利用角度和PHP。

我的问题是，一旦我点击＆＃34;提交＆＃34;发送到.txt文件的数据会打印“数组”数据。使用$_POST或使用$_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的发布数据方法

   <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：选择要发出的属性。

httpClient Angular到PHP数据发送问题

1 个答案: