Question

on sonic 3我正在使用SQLite插件我将数据插入SQLite数据库并检索该数据并将其显示在我的模板中。

我的打字稿文件

    saveData() {

        this.sqlite.create({
          name: 'ionicdb.db',
          location: 'default'
        }).then((db: SQLiteObject) => {
          db.executeSql('INSERT INTO meal VALUES(NULL,?,?,?,?,?,?,?)', [this.data.meal, this.data.pro, this.data.carb, this.data.fat, this.data.sugar, this.data.salt, this.today])
            .then(res => {
              console.log(res);
              this.toast.show("Data saved", '5000', 'center').subscribe(
                toast => {
                  this.navCtrl.popToRoot();
                }
              );
            })
            .catch(e => {
              console.log(e);
              this.toast.show(this.today, '5000', 'center').subscribe(
                toast => {
                  console.log(toast);
                }
              );
            });
        }).catch(e => {
          console.log(e);
          this.toast.show('nope 2', '5000', 'center').subscribe(
            toast => {
              console.log(toast);
            }
          );
        });
        this.getData();

      }

    getData() {
    this.sqlite.create({
      name: 'ionicdb.db',
      location: 'default'
    }).then((db: SQLiteObject) => {
      db.executeSql('CREATE TABLE IF NOT EXISTS meal(rowid INTEGER PRIMARY KEY, meal TEXT, pro INTEGER, carb INTEGER, fat INTEGER, sugar INTEGER, salt INTEGER, date TEXT)', {})
        .then(res => {
          console.log(res);
          this.toast.show("Database saved", '8000', 'center').subscribe(
            toast => {
              this.navCtrl.popToRoot();
            }
          );
        })
        .catch(e => {
          console.log(e);
          this.toast.show("not saved", '8000', 'center').subscribe(
            toast => {
              console.log(toast);
            }
          );
        });
      db.executeSql("SELECT * FROM meal WHERE date(date) = date('now')", {})
        .then(res => {          
          for (var i = 0; i < res.rows.length; i++) {
            this.meals.push({ rowid: res.rows.item(i).rowid, meal: res.rows.item(i).meal, pro: res.rows.item(i).pro, carb: res.rows.item(i).carb, fat: res.rows.item(i).fat, sugar: res.rows.item(i).sugar, salt: res.rows.item(i).salt, date: res.rows.item(i).date})
          }
        })
        .catch(e => console.log(e));


    }).catch(e => console.log(e));

  }

我的模板

 <tr  *ngFor="let meal of meals ;" >

        <td id="iki">{{meal.meal}}</td>
        <td id="bir">{{meal.pro}}</td>
        <td id="bir">{{meal.carb}}</td>
        <td id="bir">{{meal.fat}}</td>
        <td id="bir">{{meal.sugar}}</td>
        <td id="bir">{{meal.salt}}</td>
        <td id="bir">
          <button ion-button color="danger" style="width:12%;height:30px;" item-left ion-button (click)="removeMeal(meal.rowid)">
            <ion-icon name="remove"></ion-icon>
          </button>
        </td>
      </tr>

问题是每当我使用saveData（）函数进行更新时，不是更新表，而是从头开始添加所有元素。首先，我做了一个研究，并认为我应该使用 TracBy 然后我意识到即使不使用它我只能通过控制台知道它，而不是从用户的角度来看。

我桌上的例子：在saveData（）;

之前

meal1  20 20 20 20
meal2  30 30 30 30

在saveData（）;

之后

meal1  20 20 20 20
meal2  30 30 30 30
meal1  20 20 20 20
meal2  30 30 30 30
meal3  40 40 40 40

我的期望：

meal1  20 20 20 20
meal2  30 30 30 30
meal3  40 40 40 40

我该如何解决这种情况？谢谢！

Answer 1

问题可能在于您将其推送到现有阵列

更改for，将其替换为

this.meals = res.rows;

推送（array.push（））时，将项目添加到现有数组中。这就是ngFor渲染先前数据的原因。

PS：你不需要遍历数组并推送使用相同键构建的项目。

Answer 2

在推送新数据之前，我应该使用this.meals=[];清空数组。

* ngFor添加现有的表行而不是更新它们

2 个答案: