Why data get displayed on the html and instantly disappear? Angular - html

Question

I receive an array of objects in which I have to create new properties to display in the html
public inicializeData() {
this.loaderService.eLoader.emit(true);
this.cartsSubscription = this.cartsService.getCarts().subscribe(carts => {
this.orders = carts;
this.orders.forEach(cart => {
cart.date = cart.functional_id.substring(0, 8);
cart.order_number = cart.functional_id.substring(8, 14);
});
this.load = true;
this.loaderService.eLoader.emit(false);
});
}
so that an object after the creation of the new properties
{
"functional_id": "201911291131250012400000SD4AYAA1",
"transactions": [
{
"quantity": 2,
"price": 140,
"item": {
"name": "Carton de 10 coffrets",
"description": "+ 2 recharges d'argile offertes",
"product": {
"name": "Coffret empreinte rouge"
}
}
},
{
"quantity": 1,
"price": 0,
"item": {
"name": "Petit modèle",
"description": "Par 25",
"product": {
"name": "Sacs blancs",
"description": "Pour les crémations Plurielles"
}
}
}
],
"date": "20191129",
"order_number": "113125"
},
In this function I extract from the property 'functional_id' a data formed by the first 8 digits, which correspond to the date of creation, and another formed by the following 6 digits, which corresponds to a registration number.
These are the data I keep in this function with the name of 'cart.date' and 'cart.order_number' respectively.
When I show them in the html they load immediately but, in a matter of a second, the two data I created disappear from the screen.
<div class='order-list'>
<span *ngIf="!orders.length">No orders available</span>
<div class="fade-in" *ngFor="let order of orders; let i = index;">
<div class="row ciev-row header-row d-none d-lg-flex" [ngClass]="{'last': i === orders.length - 1}" (click)="toggle(order)">
<div class="col-sm-2 my-auto">{{order.functional_id}}</div>
<div class="col-sm-2 my-auto">{{order.date | date}}</div>
<div class="col-sm-2 my-auto">{{order.order_number}}</div>
</div>
</div>
I don't understand why I can't find a solution.
Someone to give me an idea that I am doing wrong.

Answer 1

Recently I faced similar kind of issue.
My goal was to add the text to a list below a text html input box when user enters something into it and hits enter key.
import { Component, OnInit } from '#angular/core';
import { FormArray, FormControl, FormGroup } from '#angular/forms';
#Component({
selector: 'add-subject-form',
template: `
<form (submit)="doNotSubmitForm($event)">
<input
type="text" class="form-control"
(keyup.enter) = "addSubject(subject)" #subject>
<ul class="list-group">
<li
*ngFor="let item of items.controls"
class="list-group-item">{{item.value}}</li>
</ul>
</form>
`,
styleUrls: ['./add-subject-form.component.css']
})
export class AddSubjectFormComponent{
form = new FormGroup({
subjects: new FormArray([])
});
addSubject(pItem: HTMLInputElement) {
this.items.push(new FormControl(pItem.value));
pItem.value = '';
}
get items() {
return this.form.controls['subjects'] as FormArray;
}
// By default the form gets submitted on keyUp.enter event.
// doNotSubmitForm method prevents that default behaviour
doNotSubmitForm(event: any) {
event.preventDefault();
}
}
I could achieve the functionality using above template and necessary code in corresponding ts component class. But the problem was the text box was becoming empty and the list below it was vanishing as the html form was getting submitted by default on keyup.enter event.
Hence I had to call following method on submit event of the form.
doNotSubmitForm(event: any) {
event.preventDefault();
}
Hope this information enriches the context.

Answer 2

I was stuck with the fact that the data disappeared on the screen thinking that it was a problem of html or css and I didn't see why. But in reality it was a problem of the subscription that depended on a service called in other components and by the flow of the application I entered twice and it overwrote me the data, showing the originals.
Thank you all for your time and help.