Question

帮帮我们。我正在构建一些使用SQLite进行存储的todo应用程序。我的主页是我显示待办事项列表的地方。它看起来像*ngFor="let todo of itemList"列表显示正常但是当我去另一个页面时，让我说我去了我添加新Todo的页面并且过程完成并且我将页面设置回root，然后我自己复制的待办事项列表。如果我退出应用程序并再次打开它，一切都恢复正常。我在某处读到了它，但我不确定细节，该人说它与订阅和取消订阅有关。如果有人可以帮助我，我将不胜感激。提前谢谢。

这是组件代码

public itemList : Array<Object>;

this.todoService.read().then((response: any)=>{
   this.itemList = <Array<Object>> response;
});

返回数据的服务类似于

read(){    
    return new Promise((resolve, reject) => {
      this.sqlite.create({
        name: DB_NAME,
        location: 'default'
      })
      .then((db: SQLiteObject) => {  
        db.executeSql('CREATE TABLE IF NOT EXISTS todos(id INTEGER PRIMARY KEY AUTOINCREMENT, name VARCHAR(32), date VARCHAR(32), time VARCHAR(32), datetime VARCHAR(32))', {})
          .then(() => console.log("Created Table OR NOT"))
          .catch(e => this.presentAlert(e));

        db.executeSql('SELECT * FROM todos ORDER BY id DESC', {})
        .then((response) => {
          if(response.rows.length > 0){
            for(var i=0; i < response.rows.length; i++){
              this.my_todos.push({
                id:response.rows.item(i).id, 
                name:response.rows.item(i).name,
                date:response.rows.item(i).date,
                time:response.rows.item(i).time, 
                datetime:response.rows.item(i).datetime
              })
            }
          }
          resolve(this.my_todos);
        })
        .catch(e => this.presentAlert(JSON.stringify(e)));
      })
      .catch(e => this.presentAlert(JSON.stringify(e)));
    }); 

  }

Answer 1

在推送之前的read（）中，你需要确保 this.my_todos 是[]，如果不是，它会继续添加，因此你有重复项。

//this.my_todos may not be [] here.
this.my_todos.push({
            id:response.rows.item(i).id, 
            name:response.rows.item(i).name,
            date:response.rows.item(i).date,
            time:response.rows.item(i).time, 
            datetime:response.rows.item(i).datetime
          })

将 this.my_todos 设置为空数组，然后按下图所示推送数据。

read(){
this.my_todos = [];  //this one  
return new Promise((resolve, reject) => {

Ionic ngFor重复列表项

1 个答案: