Upon entering a reference ID in my system, it retrieves the corresponding record from the database. However, I am facing an issue where adding a new reference number overrides the existing record instead of appending it to the list.
https://i.sstatic.net/MVVDQ.jpg
To address this problem, below is the HTML and TypeScript code snippets:
<div *ngIf="show">
<div class="form-group">
<div class="col-sm-12">
<label class="col-sm-12 cm">Details</label>
<table class="table table-hover">
<tr>
<th>Reference ID</th>
<th>First Name</th>
<th>Surname</th>
<th>Reference </th>
</tr>
<td>{{Details.id}}</td>
<td>{{Details.firstname}}</td>
<td>{{Details.lastname}}</td>
<td>{{Details.reference}}</td>
</table>
</div>
</div>
</div>add() {
const data = {
reference: this.assistant.reference,
}
console.log(data);
this.Service.add(data)
.subscribe(
req => {
console.log("successful");
this.show = true;
this.Details.id = req['data']['member_record']['id'];
this.Details.firstname = req['data']['member_record']['first_name'];
this.Details.lastname = req['data']['member_record']['last_name'];
this.Details.reference = req['data']['member_record']['reference'];
},
error => {
console.log(error);
}
);
}If anyone can assist with dynamically appending records to the list on button click, it would be greatly appreciated. Additionally, tips on how to remove these UI records without affecting the database entries would be helpful as well.