Я создаю простое приложение CRUD с ионами c и angular. Я могу выполнять все функции 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 file
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 работает, это просто вопрос обновления моего списка после того, как я добавил или отредактировал данные. Я предполагаю, что то, что будет работать для решения моей проблемы с добавлением, будет таким же и для редактирования. Я использую Иони c 6.2.2 и angular 9