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

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.

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.