数据被新记录覆盖 Ionic 4

Question

所以基本上我正在努力获得一份成绩单，并且我正在针对学生所拥有的每个科目进行数据查询。不幸的是，所有字段都将被替换，而不是保持原样。我可能认为这是某种 Ionic 限制，所以请深入了解我做错了什么以及如何实现我想要做的事情。

提供商：

  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 文件：

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 文件:

<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

问题出在您更新 this.items 时。您处于 for 循环中，因此每个值都会擦除最后一个值。一种解决方案是通过这种方式将属性添加到 tipos：

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);});

          }

        });

然后在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>

数据被新记录覆盖 Ionic 4

Data gets overwritten on new records Ionic 4

arrays

ionic-framework

angular

ionic4