Angular 离子3-从firebase数据库刷新项目后列表未更新

在我的应用程序中，我有一个搜索栏和下面的“标签”列表。它用于让用户添加一个新的标记，并带有一个控制过滤器来检查他输入的单词是否已经存在于列表中。只有当新标记不存在时，才会将其添加到数据库中。
如果可以添加单词，则会显示一个按钮，单击该按钮后，新单词将被推送到数据库中。我期望的行为是，在添加单词后，搜索栏下面的列表会实时更新新单词；相反，在添加后，它变为空白，我必须返回，然后再次转到页面以查看新列表。
以下是searchbar+列表的html代码：

<ion-searchbar (ionInput)="getItems($event)" placeholder="Add tag ... "></ion-searchbar>
<ion-scroll style="width:100%;height:60vh" scrollY="true">
<ion-list>
<ion-item *ngFor="let tag of tagList">
  <h2> {{ tag.nome }} </h2>
</ion-item>
 </ion-list>
</ion-scroll> 

<button ion-button [disabled]="!isEnabled"(click)="clickedButton()">Add</button>

{{tag.nome}}
添加

在.ts文件中，这是我用来保存标记和刷新列表的代码：

export class NewtagPage {

 public tagList: Array<any>;
 public loadedTagList: Array<any>;



  constructor(public navCtrl: NavController, public navParams: NavParams, public api: Api, 
  public menuCtrl: MenuController, public toastCtrl: ToastController) {


  var ref1 = firebase.database().ref('/tag/'); //get the tags from DB


  //creo la lista di tag
   ref1.once('value', tagList => {
  let tags = [];
  tagList.forEach( poi => {
    tags.push(poi.val());
    return false;
  });

  this.tagList = tags;
  this.loadedTagList = tags;
});

 }



ionViewWillEnter() {
  this.initializeItems();
 }


refreshItems():void{
var ref1 = firebase.database().ref('/tag/'); 
ref1.once('value', tagList => {
     let tags = [];
  tagList.forEach( poi => {
    tags.push(poi.val());
    return false;
  });

  this.tagList = tags;
  this.loadedTagList = tags;
});
}
initializeItems(): void {
 this.tagList = this.loadedTagList;
}

presentToastOk(){

   let toast = this.toastCtrl.create({
    message: 'Tag was added!',
    duration: 2000,
    position: 'top'
  }).present();
  this.initializeItems();
} 

clickedButton(){
  if (this.tagList.length==0){//posso aggiungere il tag
    var tagData = {
      nome: this.textSearch
    }
    var key = firebase.database().ref().child('tag').push().key;
    var updates = {};
    updates['/tag/'+key] = tagData;
    updates['/point_of_interest/'+ this.poi.chiave + '/tags/' + key] = "true";
firebase.database().ref().update(updates);
this.presentToastOk();
this.refreshItems();
this.isEnabled = false;
  } else {
    this.presentToastWrong();

  }
}

//filter function
getItems(searchbar) {
  // Reset items back to all of the items
  this.initializeItems();

  // set q to the value of the searchbar
  var q = searchbar.srcElement.value;
  this.textSearch = q;

  // if the value is an empty string don't filter the items
  if (!q) {
    return;
   }


  this.tagList = this.tagList.filter((v) => {
    if(v.nome && q) {
      if (v.nome.toLowerCase().indexOf(q.toLowerCase()) > -1) {
        return true;
      }
      return false;
    }
  });

  if (this.tagList.length==0){
    this.isEnabled = true;
  } else{
    this.isEnabled = false;
  }
}
}

导出类NewtagPage{
公共标记列表：数组；
公共加载的标签列表：数组；
构造函数（公共navCtrl:NavController、公共navParams:navParams、公共api:api、，
public menuCtrl:MenuController，public toastCtrl:ToastController）{
var ref1=firebase.database（）.ref（'/tag/'）；//从DB获取标记
//克里奥拉利斯塔迪塔格酒店
参考1.once（'value'，标记列表=>{
让标签=[]；
tagList.forEach（poi=>{
tags.push（poi.val（））；
返回false；
});
this.tagList=标签；
this.loadedTagList=标签；
});
}
ionViewWillEnter（）{
this.initializeItems（）；
}
refreshItems（）：void{
var ref1=firebase.database（）.ref（'/tag/'）；
参考1.once（'value'，标记列表=>{
让标签=[]；
tagList.forEach（poi=>{
tags.push（poi.val（））；
返回false；
});
this.tagList=标签；
this.loadedTagList=标签；
});
}
initializeItems（）：void{
this.tagList=this.loadedTagList；
}
出席{
让toast=this.toastCtrl.create({
消息：“已添加标记！”，
期限：2000年，
位置：'顶部'
}).present（）；
this.initializeItems（）；
} 
单击按钮（）{
如果（this.tagList.length==0）{//posso aggiungere il标记
var tagData={
nome:这个是.textSearch
}
var key=firebase.database（）.ref（）.child（'tag'）.push（）.key；
var更新={}；
更新['/tag/'+key]=tagData；
更新['/point\u of\u interest/'+this.poi.chiave+'/tags/'+key]=“true”；
firebase.database（）.ref（）.update（更新）；
这个。呈现给stok（）；
这是refreshItems（）；
this.isEnabled=false；
}否则{
这个。表示错误（）；
}
}
//过滤函数
getItems（搜索栏）{
//将项目重置回所有项目
this.initializeItems（）；
//将q设置为搜索栏的值
var q=searchbar.srcement.value；
this.textSearch=q；
//如果该值为空字符串，则不要筛选项目
if（！q）{
返回；
}
this.tagList=this.tagList.filter（（v）=>{
如果（v.nome&q）{
if（v.nome.toLowerCase（）.indexOf（q.toLowerCase（））>-1）{
返回true；
}
返回false；
}
});
if（this.tagList.length==0）{
this.isEnabled=true；
}否则{
this.isEnabled=false；
}
}
}

过滤器功能工作得非常完美，我只是为了完整性而添加了它。
如您所见，创建页面时我做的第一件事是获取firebase的标记列表。然后，当单击按钮时，标签被添加到数据库中，通过“presentToastOk”函数重新初始化项目，然后我刷新表示要在html上显示的列表的变量。
当我添加新词时，列表会重新出现片刻，然后立即消失。

---

我在另一个项目中使用了相同的方法，并且工作正常。为什么它不再工作了？我复制粘贴了原样的代码，现在找不到问题。

我知道这可能是一个延迟响应，但我的想法如下：

这些操作很可能是异步发生的，因此当您调用refreshItems时，列表很可能保持不变

一种解决方法是在用户下拉屏幕时使用离子刷新器标签刷新列表

对于此解决方案，您可以在此处查看文档：

然而，如果这个解决方案对于你的应用程序来说是不够的，并且你只把它看作是一个“功能”，那么你可以通过添加一个可观察的

this.substription = Observable.interval(1000).subscribe(x => {
      //here there's a delay of 1 sec, you could potentially call your refreshItems() method here.
  });

我使用它作为一个简单的时钟，它工作得很好，但我还没有通过调用服务器来测试它，因为我不确定它是否对您是一个好的解决方案，但您可以尝试一下并让我们知道