0

Hi i am currently trying to build an Angular project that is based around a form. The form data is saved to a MySQL database, a search function is supposed to a retrieve a specific dataset that is displayed in a separate view where it can be either updated or deleted. The search offers a list of possible results as links and on selecting a specific link the app should be routing into the view that shows the dataset.

Here is where I am stuck: Both saving and searching works out fine. When selecting a link from the search result the app routes to the correct view but the corresponding input fields are empty. If I use the inspection tool of the browser I can see that an XHR containing the correct dataset is delivered.

I am quite new at programming in general and at my end of my wit.

Here are all the code snippets I think might be relevant:

excerpt from detailview.html (the form is longer, but missing elements are structured in the same way):

<div *ngIf="patient"> 

    <h2> Meine Daten:</h2>

    <div>
        <label for="patientendaten-titel">Titel: </label>
        <input id="patientendaten-titel" [(ngModel)]="patient.titel" placeholder="titel">
    </div>

    <div>
        <label for="patientendaten-anrede">Anrede: </label>
        <input id="patientendaten-anrede" [(ngModel)]="patient.anrede" placeholder="anrede">
    </div>

    <div>
        <label for="patientendaten-vorname">Vorname: </label>
        <input id="patientendaten-vorname" [(ngModel)]="patient.vorname" placeholder="vorname">
    </div>

    <div>
        <label for="patientendaten-name">Nachname </label>
        <input id="patientendaten-name" [(ngModel)]="patient.name" placeholder="name">
    </div>
</div>

detailview.component.ts:

patient: Patientendaten | undefined;
getPatient():void{ 
    const id = parseInt (this.route.snapshot.paramMap.get('id')!);
    this.formService.getPatientId(id).subscribe(patient=> this.patient = patient);
  }

form.service.ts:

private formUrl2 = 'http://localhost/api/getId.php' 

public getPatientId (id: number): Observable<Patientendaten>{

    const url = `${this.formUrl2}/${id}`;
    return this.http.get<Patientendaten>(url);

  }

getId.php:

<?php

// returns data of patient selected by Id as JSON

require 'connect_db.php';

$url= $_SERVER['REQUEST_URI'];
$id= basename($url);

$sql = "SELECT id, titel, anrede, vorname, name, strasse, hausnr, plz, ort, telefonnr, email 
    FROM personendaten
    WHERE id = '$id'";
$result = mysqli_query($con, $sql);

echo json_encode ($result->fetch_all(MYSQLI_ASSOC));

$con->close();

?>

edit:show declaration of patient variable in detailview.component.ts

doodlebug
  • 11
  • 2
  • 1
    **Warning:** You are wide open to [SQL Injections](https://php.net/manual/en/security.database.sql-injection.php) and should use parameterized **prepared statements** instead of manually building your queries. They are provided by [PDO](https://php.net/manual/pdo.prepared-statements.php) or by [MySQLi](https://php.net/manual/mysqli.quickstart.prepared-statements.php). Never trust any kind of input! Even when your queries are executed only by trusted users, [you are still in risk of corrupting your data](http://bobby-tables.com/). [Escaping is not enough!](https://stackoverflow.com/q/32391315) – Dharman Aug 31 '23 at 20:37
  • Thank you for making me aware of this problem. I will look into that later on. But at this point it should not be a problem because i am not making it available to anyone but myself (it's only available on a local server and not through the web). I am currently focussing on making the app work. Making it save to use would be a future project. – doodlebug Aug 31 '23 at 20:54
  • It's not about someone hacking you. You have a bug in your code. Even if it's only you using it, you could still break the whole app. There is no excuse to not use prepared statements. Please learn it because it's for your own good as a developer. – Dharman Aug 31 '23 at 21:08

1 Answers1

0

I don't see how you declared your patient. But the code looks ligid. One thing that I would try is to modify ```getPatient`` to be:

getPatient():void{ 
    const id = parseInt (this.route.snapshot.paramMap.get('id')!);
    this.formService.getPatientId(id).subscribe({
       next: patient=> { this.patient = patient; }
    });
  }

Another way is to make your patient as observable:

export class...
{
  patient$: Observable<Patientendaten> | undefined;
}

then you components will have next look:

<div *ngIf="patient$ | async"> 
  ...
</div>
Jivopis
  • 121
  • 11
  • Adjusting getPatient() as you suggested resulted in the same outcome. As to using an Observable : I thought i did just that. I figured that might be a good idea to handle asynchonous operations. – doodlebug Aug 31 '23 at 20:41
  • Usually *ngIf for nullable object works fine. I would try to write in console ```this.patiant``` state when you receive the response from the service. UI is not showing your data because it's null, and here is a question do you really have the data back? – Jivopis Aug 31 '23 at 20:51
  • It seems to me like the php script does in fact deliver the result i am looking for. I can have a look at it in the inspection tool of the browser and see the correct dataset delivered back. But i am not sure if it is transfered correctly (or at all) to the Angular app – doodlebug Aug 31 '23 at 21:25