угловые 8 элементов исчезают после почтового запроса

Question

Я новичок в angular, я пытался установить соединение с базой данных, используя php в качестве языка программирования бэкэнда, он работал нормально, и элементы отображались из базы данных, но когда я вставил их в базу данных, это работаети они вставляются в базу данных, но мои элементы исчезают при отправке формы и при повторной отправке формы они мигают в течение нескольких секунд.

МОЙ КОД HTML

<form (submit)="loginUser($event)">
    <input type="text" placeholder="User name" id="name" >
    <input type="password" placeholder="password" id="pass">
    <button type="submit" >Log in</button>
    {{name}}
    </form>
    <ul *ngFor="let item of datas ">
        <li>{{item.name}} {{item.pass}}</li>
    </ul>

МОЙ ЛОГИН. КОМПОНЕНТНЫЙ ФАЙЛ

import { Component, OnInit } from '@angular/core';
import { AuthService } from 'src/app/services/auth.service';
import { iEmployee } from '../../empolyee';
@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  constructor( private Auth:AuthService) { }
  public datas;

  ngOnInit() {
    this.Auth.getUserDetail().subscribe(data=> this.datas=data);
  }

  loginUser(event: { preventDefault: () => void; target: any; }){
      event.preventDefault();
    const target = event.target;
    const name=target.querySelector('#name').value;
    const pass=target.querySelector('#pass').value;
    this.Auth.createuser(name,pass).subscribe(data=>this.datas=data);
    this.Auth.getUserDetail().subscribe(data=> this.datas=data);

  }
}

МОЙ ФАЙЛ ОБСЛУЖИВАНИЯ

import { Injectable } from '@angular/core';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { iEmployee } from '../empolyee';

@Injectable({
  providedIn: 'root'
})

export class AuthService {

constructor(private http:HttpClient) { }
private url : string='http://localhost:81/example/Angular/php/display.php';
private url2:string='http://localhost:81/example/Angular/php/addNew.php';
getUserDetail() {
return this.http.get(this.url)          
}
createuser(name , pass) {
  return this.http.post(this.url2,{name,pass},{
    headers : {
        'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8'
    }
});
}
}

МОЙ ADDNEW.PHP ФАЙЛ

<?php 
header('Access-Control-Allow-Origin: *'); 

include 'connection.php';
$data = json_decode(file_get_contents("php://input"),true);
$name= $data['name'];
$pass= $data['pass'];
$sql="insert into test(name,pass) values ('$name','$pass')";
$result = mysqli_query($con, $sql);  


?>