如何使用Angular和PHP在数据库中添加一些内容？

Question

我只是不知道如何从Angular连接到我的数据库。因此，我在端口4200上有Angular运行，Apache在80上，MySQL在3306上。我的最后一个分配是使用HTML，JavaScript和PHP添加MySQL的数据库。现在，我必须将Angular用于前端，但我不明白如何建立连接。

我有我的文件 this

add.service.ts：

import { Injectable } from '@angular/core';
import {HttpClient} from "@angular/common/http";
import {Recipe} from "../Recipe";
import {Observable} from "rxjs";

@Injectable({
  providedIn: 'root'
})

export class AddService {

  _url = "./addRecipePHP.php";

  constructor(private _http: HttpClient) { }

  enroll(recipe: Recipe): Observable<any>
  {
    return this._http.post<any>(this._url, recipe);
  }

}

add.component.ts： addrecipepempon.ts：

import { Component, OnInit } from '@angular/core';
import {Recipe} from "../Recipe";
import {AddService} from "./add.service";

@Component({
  selector: 'app-add',
  templateUrl: './add.component.html',
  styleUrls: ['./add.component.css']
})
export class AddComponent implements OnInit {

  constructor(private _addService: AddService) {}

  ngOnInit(): void {
  }
  recipeModel = new Recipe("", "", "", 10, "");

  addClick()
  {
    this._addService.enroll(this.recipeModel)
      .subscribe(
        data => console.log("recipe added successfully!", data)
      )
  }

}

addrecipepephp.php.php.php：

<?php

header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");
header("Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, X-Requested-With");

$conn = mysqli_connect("localhost", "root", "", "recipes");
if($conn == false)
{
    die('Could not connect');
}

$recipe = json_decode(file_get_contents("php://input"), true);
$authorname = $recipe['authorName'];
$name = $recipe['recipeName'];
$type = $recipe['recipeType'];
$time = $recipe['recipeTime'];
$description = $recipe['recipeDescription'];

echo json_encode($recipe);
$sql_query = "INSERT INTO Recipe(authorName, recipeName, recipeType, recipeTime, recipeDescription) VALUES
                                                                     ('$authorname', '$name',
                                                                      '$type', '$time', '$description')";

$result = mysqli_query($conn, $sql_query);
if ($result==false)
{
    echo "Something went wrong!";
}
else {
    echo "The recipe was added successfully";
}
mysqli_close($conn);

and app。 component.html，尽管这与没有那么重要的是：

<div class="container-fluid" id="#add_page" style="display: block">
  <form id="#recipe_form" #recipeForm="ngForm" (ngSubmit)="addClick()" novalidate>

    {{recipeForm.value | json}}
    <hr />
    {{recipeModel | json}}

    <div class="form-group  form-group-lg">
      <label for="authorname">Author Name:</label>
      <input class="form-control" type="text" name="authorname" id="authorname" [(ngModel)]="recipeModel.authorName"><br>
    </div>

    <div class="form-group  form-group-lg">
      <label for="name">Recipe Name:</label>
      <input class="form-control" type="text" name="name" id="name" [(ngModel)]="recipeModel.recipeName"><br>
    </div>

    <div class="form-group  form-group-lg">
      <label for="type">Recipe Type:</label>
      <input class="form-control" type="text" name="type" id="type" [(ngModel)]="recipeModel.recipeType"><br>
    </div>

    <div class="form-group  form-group-lg">
      <label for="time">Recipe Time Required (in minutes):</label>
      <input class="form-control" type="text" name="time" id="time" [(ngModel)]="recipeModel.recipeTime"><br>
    </div>

    <div class="form-group  form-group-lg">
      <label for="description">Recipe Description:</label>
      <textarea class="form-control" name="description" id="description" rows="7" cols="50" [(ngModel)]="recipeModel.recipeDescription">
      </textarea><br>
    </div>

    <button class="btn btn-primary" id="#add_button" type="submit">
      <a href="#add">Add</a>
    </button>

  </form>
  <section id="#status">

  </section>
</div>

我遇到了一些错误，因为我没有找到我的php文件，但是现在我没有错误，但它没有做任何事情。帮助？？