【发布时间】：2020-04-14 00:45:31
【问题描述】：
我正在创建一个具有离子和角度的简单 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() {
}
}
p.s 所有 Cruding 都有效，只需在添加或编辑数据后更新我的列表即可。我认为解决我的添加问题的方法对于编辑也是一样的。 我正在使用 ionic 6.2.2 和 angular 9
【问题讨论】：
-
您是否尝试添加断点以查看您的服务是否被调用？
-
@maury844 正在调用该服务，因为数据肯定正在添加到数据库中。
-
抱歉回复晚了，但我的意思是应该在添加/编辑之后调用的“getAll”，我猜发生的事情是你的
viewData组件没有因为任何原因被销毁因此，当您在该过程之后返回它时，它不会再次创建，永远不会调用您的服务来获取新数据
标签： angular typescript ionic-framework