angular - 成功创建后如何重新加载列表中的数据？

问题描述

我正在使用离子和角度创建一个简单的 CRUD 应用程序。我能够执行所有 CRUD 功能。我现在的问题是，当我将新对象添加到数据库中时，我不知道如何重新加载列表。我创建了一个添加按钮（在查看数据页面上）来打开一个创建页面，添加完成后我导航回查看数据页面，但列表不会更新。

我试图在 NgOnInit 或 Constructor 中包含将数据加载到列表变量中的函数，但这也不起作用。

我还尝试使用事件发射器从列表视图页面调用 GetAnime 函数（在我创建一个新条目之后），但我也无法让它工作。

这是我的视图数据页面 .ts 文件的代码

import { Component, OnInit } from "@angular/core";
import { Anime } from "src/app/Classes/anime";
import { DataServiceService } from "src/app/Services/data-service.service";
import {EventEmitterService} from '../../Services/event-emitter.service';
import { Router } from "@angular/router";
import { Validators, FormBuilder, FormGroup } from "@angular/forms";

import {ModalPage} from '../modal/modal.page';
import { ModalController } from '@ionic/angular';
import { NgModel } from '@angular/forms';

@Component({
  selector: "app-anime",
  templateUrl: "./anime.page.html",
  styleUrls: ["./anime.page.scss"],
})
export class AnimePage implements OnInit {

  AnimeArray: Anime[] = [];
  // CurrentAnime : Anime;

  constructor(
    private dataService: DataServiceService,
    private router: Router,
    public modalController: ModalController,
    private eventEmitterService: EventEmitterService,
  ) 
  {

    this.GetAnime();

  } //Constructor

  ngOnInit() {

    if (this.eventEmitterService.subsVar==undefined) {    
      this.eventEmitterService.subsVar = this.eventEmitterService.    
      CallGetAnime.subscribe((name:string) => {    
        this.firstFunction();    
      });    
    } 

  } //ngOnInit



  CreateAnime(){
    this.router.navigate(['/anime/create-anime']);
  }

  GetAnime(): void {

    this.dataService.GetAnime().subscribe((data) =>

      data.forEach((element) => {
        var anime = new Anime();
        anime.AnimeID = element.AnimeID;
        anime.AnimeName = element.AnimeName;
        anime.Anime_Description = element.Anime_Description;
        this.AnimeArray.push(anime);
      })//For each

    );//Subscribe

  } // Get Anime

  async ItemClick(ItemID : number){

    var CurrentAnime = this.AnimeArray.find(ca => ca.AnimeID == ItemID);

    const modal = await this.modalController.create({

      component : ModalPage,
      componentProps : {

        'CurrentAnime' : CurrentAnime,
        'ModalTitle' : 'Manage Anime'

      }

    });
    await modal.present();

    modal.onDidDismiss().then( (data : any) => {

      try {
        if(data.data.Delete == true)
        {
          this.dataService.DeleteAnime(data.data.ID)
          .subscribe( () => {
            this.AnimeArray = [];
            this.GetAnime();
          });
        }//if
      }//try 
      catch (error) {

      }

    })

  }// Async Item Click

} //Export

这是创建页面 .ts 文件的代码

import { Component, OnInit } from '@angular/core';
import { Router } from "@angular/router";
import { DataServiceService } from "src/app/Services/data-service.service";
import {EventEmitterService} from '../../../Services/event-emitter.service';
import { Anime } from "src/app/Classes/anime";
import { Validators, FormBuilder, FormGroup } from "@angular/forms";
// import { Events } from '@ionic/angular';

@Component({
  selector: 'app-create-anime',
  templateUrl: './create-anime.page.html',
  styleUrls: ['./create-anime.page.scss'],
})
export class CreateAnimePage implements OnInit {

  private CreateAnimeForm: FormGroup;
  private ErrorMessage: string;
  public message : string;

  constructor(
    private dataService: DataServiceService,
    private router: Router,
    private formBuilder: FormBuilder,
    private eventEmitterService: EventEmitterService
  ){

    this.CreateAnimeForm = this.formBuilder.group({
      AnimeName: ["", Validators.required],
      Anime_Description: ["", Validators.required],
    });

  }//Constructor

  CreateAnime(AnimeForm : FormBuilder){

    const anime = AnimeForm.value;

    this.dataService.AddAnime(anime).subscribe(() => {

      this.message = 'Anime has been saved successfully';
      //this.CreateAnimeForm.reset();

      // this.events.publish('functionCall:LoadAnimeData');
      this.eventEmitterService.CallGetAnime;

  });

  }

  ngOnInit() {
  }

}

ps 所有的 Cruding 都可以，只需在我添加或编辑数据后更新我的列表即可。我认为解决我的添加问题的方法对于编辑也是一样的。我正在使用 ionic 6.2.2 和 angular 9

标签： angulartypescriptionic-framework

angular - 成功创建后如何重新加载列表中的数据？

问题描述

解决方案

推荐阅读