Question

在我的应用程序中，我有一个搜索栏和下面的“标签”列表。它用于让用户添加一个新标签，并使用控制过滤器检查他输入的单词是否已存在于列表中。仅当新标记尚不存在时，才会将其添加到数据库中如果可以添加单词，则按钮变为可见，单击后，新单词将被推送到数据库。我期待的行为是，在添加单词后，搜索栏下方的列表将使用新单词实时更新;相反，添加后它变成空白，我必须返回然后再次转到该页面以查看新列表这是搜索栏+列表的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>

在.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;
  }
}
}

过滤功能完美无缺，我刚刚将其添加为完整性如您所见，我在创建页面时所做的第一件事就是获取firebase的标记列表。然后，当单击按钮时，标签将添加到数据库中，通过“presentToastOk”函数重新初始化项目，然后刷新表示要在html上显示的列表的变量。
当我添加一个新单词时，该列表会重新出现一会儿，然后立即消失我在另一个项目中使用了相同的方法，并且工作正常。为什么它不再工作了？我已经复制粘贴了代码，现在我找不到问题了。

Answer 1

我知道这可能是一个迟到的回应，但这是我的想法：

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

当用户拉下屏幕时，解决方法可能是使用离子复习标记刷新列表

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

https://ionicframework.com/docs/api/components/refresher/Refresher/

但是，这个解决方案对您的应用来说还不够，而且您只将其视为“功能”，您可以通过添加Observable来刷新信息

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

我正在使用它来制作一个简单的时钟而且工作正常，但我还没有通过调用服务器来测试这个，我不确定它是否适合你，但是你可以尝试一下让我们知道！

Ionic 3 - 从firebase数据库刷新项目后列表不更新

1 个答案: