HttpClient Angular в проблему отправки данных PHP

У меня есть небольшой проект, который я пытаюсь выполнить, где какой-то пользователь может ввести некоторые данные в текстовое поле, которое затем отправляется на сервер php, я раньше не использовал angular, когда он работал раньше, но теперь я пытаюсь использовать angular и php вместе.

Моя проблема в том, что как только я нажимаю «отправить» данные, которые отправляются в файл .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.info(this.input.nativeElement.value);
  this.http.post('http://localhost:81/test.php', this.toSend)
  .subscribe(
    res => {
      console.info(res);
     }
    );
  }

   requestData() {
   this.http.get('http://localhost:81/test.php').subscribe(
      data => {
        const myJSON = JSON.stringify(data);
        console.info(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>

Попробуйте написать dd ($ _ POST); на стороне php вместо echo $ _POST; чтобы вы могли понять структуру того, что вы получаете

— 07.06.2018 10:16

php angular angular-httpclient

07.06.2018 10:09

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Symfony Station Communiqué - 7 июля 2023 г

Это коммюнике первоначально появилось на Symfony Station .

Оживление вашего приложения Laravel: Понимание режима обслуживания

Здравствуйте, разработчики! В сегодняшней статье мы рассмотрим важный аспект управления приложениями, который часто упускается из виду в суете...

Установка и настройка Nginx и PHP на Ubuntu-сервере

В этот раз я сделаю руководство по установке и настройке nginx и php на Ubuntu OS.

Коллекции в Laravel более простым способом

Привет, читатели, сегодня мы узнаем о коллекциях. В Laravel коллекции - это способ манипулировать массивами и играть с массивами данных. Благодаря...

Как установить PHP на Mac

PHP - это популярный язык программирования, который используется для разработки веб-приложений. Если вы используете Mac и хотите разрабатывать...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Если вы обращаетесь к элементу DOM с помощью @viewChild, вам нужно подождать, пока ловушка жизненного цикла 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.info(res);
     }
    );
  }

   requestData() {
   this.http.get('http://localhost:81/test.php').subscribe(
      data => {
        const myJSON = JSON.stringify(data);
        console.info(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.info(this.data)});
         }

    postData() {

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

fromEvent: превращает событие в наблюдаемую последовательность pluck: выберите свойства для испускания.

Рад, что смог помочь товарищу :)

— 07.06.2018 11:45

07.06.2018 10:30