Data gets overwritten on new records Ionic 4 - arrays

Question

So basically I'm trying to achieve a reports card and I'm making a data query per each subject the student have. Unfortunately all the fields are getting replaced instead of leaving the previous one as it is. I may think this is some sort of Ionic limitation, so please would love insight in what I'm doing wrong and how to achieve what I'm trying to do.
Provider:
tipos(data) {
return new Promise((resolve, reject) => {
let headers = new HttpHeaders();
headers.append('Content-Type', 'application/x-www-form-urlencoded');
let params: HttpParams = this.serialize(data);
this.http.post('https://xyz.ec/app/app/tipos', params, { headers: headers })
.subscribe(res => {
//console.log(res);
resolve(JSON.parse(JSON.stringify(res)));
}, (err) => {
reject(err);
});
});
}
actividades_det(data) {
return new Promise((resolve, reject) => {
let headers = new HttpHeaders();
headers.append('Content-Type', 'application/x-www-form-urlencoded');
let params: HttpParams = this.serialize(data);
this.http.post('https://xyz.ec/app/app/actividades-detalle', params, { headers: headers })
.subscribe(res => {
//console.log(res);
resolve(JSON.parse(JSON.stringify(res)));
}, (err) => {
reject(err);
});
});
}
TS File:
export class NotasIndPage {
data: any = { uid: '' };
mdata: any = {uid:'',idm: '' };
pdata: any = {idpa:'' };
matdata: any = { uid:'',idm: '',idp:'' };
tipdata: any = { uid:'',idm: '',idpe:'',idpa:'',idt:'' };
tipos: any =[];
items: any =[];
mat: any =[];
par: any =[];
submitted = false;
toast: any;
uid: any;
id: any;
idpe: any;
idpa: any;
mnombre: any;
pnombre: any;
constructor(
public userData: UserData,
public router: Router,
public toastController: ToastController,
private storage: Storage,
public route: ActivatedRoute) {
}
ionViewWillEnter() {
this.storage.get('sess').then((val) => {
if(val){
this.data.uid=val;
this.uid=val;
this.route.params.subscribe(params => {
this.id = params['idm'];
this.idpe = params['idpe'];
this.idpa = params['idpa'];
});
this.matdata.idm=this.id;
this.mdata.idm=this.id;
this.mdata.uid=this.uid;
this.pdata.idpa=this.idpa;
this.userData.parcial(this.pdata).then(datpa => {this.par = datpa; this.pnombre=this.par[0].nombre;});
this.userData.materia(this.mdata).then(datma => {this.mat = datma; this.mnombre=this.mat[0].nombre;});
//Bloque de carga de datos en formulario
this.userData.tipos(this.data)
.then(dat => {
this.tipos = dat;
for(let i=0;i<this.tipos.length;i++){
this.tipdata.uid=this.uid;
this.tipdata.idm=this.id;
this.tipdata.idpe=this.idpe;
this.tipdata.idpa=this.idpa;
this.tipdata.idt=dat[i].id_tipo;
console.log(this.uid+" - "+this.id+" - "+this.idpe+" - "+this.idpa+" - "+dat[i].id_tipo);
this.userData.actividades_det(this.tipdata).then(datt => {this.items = datt; console.log(datt);});
}
});
//Fin de bloque de carga de datos
}else{
this.router.navigateByUrl('/login');
}
});
}
HTML file:
<ion-card *ngFor="let tipo of tipos" >
<ion-card-header>
<ion-card-subtitle>Id: {{tipo.id_tipo}} </ion-card-subtitle>
<ion-card-title>{{tipo.nombre}}</ion-card-title>
</ion-card-header>
<ion-card-content>
<ng-container *ngFor="let item of items" ><ion-label class="under" *ngIf="item.id_actividad!=0" > {{item.nombre}} - {{item.nota}} : {{item.descripcion}}<br></ion-label></ng-container>
</ion-card-content>
</ion-card>
Image of how the the report card is designed

Answer 1

The problem is when you update this.items. You are in a for-loop, so each value will erase last value. A solution could be to add a property to tipos this way:
this.userData.tipos(this.data)
.then(dat => {
this.tipos = dat;
for(let i=0;i<this.tipos.length;i++){
// ...
this.userData.actividades_det(this.tipdata).then(datt => {this.tipos[i].items = datt; console.log(datt);});
}
});
and then use it in html:
<ng-container *ngFor="let item of tipo.items" ><ion-label class="under" *ngIf="item.id_actividad!=0" > {{item.nombre}} - {{item.nota}} : {{item.descripcion}}<br></ion-label></ng-container>