ngFor duplicating values when changing and returning page

Question

I made an api that generates only one value, already in the application that uses Ionic and Angular. When entering the Main page the unique value appears there, but when I go to a secondary page and click on it "Back", the unique value is doubled / loads another again.

Component.:

loadDaymm(){
    return new Promise(resolve => {
        let body = {
            aksi : 'd5d519f0b2abb86766aada568eb50d61',
            limit : this.limit,
            start : this.start,
        };

        this.postPvdr.postData(body, 'api.php').subscribe(data => {
            for(let day_rmmdata of data.result){
                this.day_rmmdatas.push(day_rmmdata);
            }
            resolve(true);
        });
    });
  }

page.html

<div *ngFor="let day_rmmdata of day_rmmdatas">

    <div class="header">
        <div class="title">{{day_rmmdata.title}}</div>
    </div>

</div>

Answer 1

The problem lies in that line:

this.day_rmmdatas.push(day_rmmdata);

The first time you enter the page, the array this.day_rmmdatas is empty. However, the second time you return to the page, the array already has the value you got the first time. A possible solution is to always reset the array before making the request:

loadDaymm(){
    return new Promise(resolve => {
        let body = {
            aksi : 'd5d519f0b2abb86766aada568eb50d61',
            limit : this.limit,
            start : this.start,
        };

        this.day_rmmdatas = [];
        this.postPvdr.postData(body, 'api.php').subscribe(data => {
            for(let day_rmmdata of data.result){
                this.day_rmmdatas.push(day_rmmdata);
            }
            resolve(true);
        });
    });
  }