NativeScript: Die Benutzeroberfläche zeigt das entfernte Objekt nicht aus einem ObservableArray ohne Aktualisierung

Question

Erstens, ich bin sehr neu in NativeScript. Ich folgte einem Tutorial für eine ToDo-Liste hier https://x-team.com/blog/build-simple-todo-list-mobile-application-nativescript/, und als eine kleine Übung für mich selbst wollte ich eine remove-Funktion für die Aufgaben in einer Liste hinzufügen.

Hier ist mein Code:

Tasks.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo"> 
<Page.actionBar> 
    <ActionBar title="Tasks"> 
     <ActionBar.actionItems> 
      <ActionItem text="New" tap="{{ insert }}" ios.position="right" /> 
      <ActionItem text="Delete" tap="{{ delete }}" ios.position="right" />     
     </ActionBar.actionItems> 
    </ActionBar> 
</Page.actionBar> 
<ListView items="{{ tasks }}"></ListView> 

Aufgaben-view-model.js

var Observable = require("data/observable").Observable; 
var ObservableArray = require("data/observable-array").ObservableArray; 
var Sqlite = require("nativescript-sqlite"); 
var Dialogs = require("ui/dialogs"); 

function createViewModel(database, listId) { 
    var viewModel = new Observable(); 
    viewModel.tasks = new ObservableArray([]); 
    viewModel.listId = listId; 

    viewModel.insert = function() { 
     Dialogs.prompt("Task Name", "").then(result => { 
      database.execSQL("INSERT INTO tasks (list_id, task_name) VALUES (?, ?)", [this.listId, result.text]).then(id => { 
       var _string = "ID: " + id + ", " + result.text; 
       this.tasks.push(_string); 
      }, error => { 
       console.log("INSERT ERROR", error); 
      }); 
     }); 
    } 

    viewModel.select = function() { 
     this.tasks = new ObservableArray([]); 
     database.all("SELECT id, task_name FROM tasks WHERE list_id = ?", [this.listId]).then(rows => { 
      for(var row in rows) { 
       var _id = rows[row][0]; 
       var _item = rows[row][1]; 
       var _string = "ID: " + _id + ", " + _item; 
       this.tasks.push(_string); 
      } 
     }, error => { 
      console.log("SELECT ERROR", error); 
     }); 
    } 

    viewModel.delete = function() { 
     Dialogs.prompt("Task ID", "").then(result => { 
      database.execSQL("DELETE FROM tasks WHERE id = ?", [result.text]).then(id => { 
       Dialogs.prompt(id); 
      }, error => { 
       console.log("DELETE ERROR", error); 
      }); 
     }); 
    } 

    viewModel.select(); 

    return viewModel; 
} 

exports.createViewModel = createViewModel; 

Die eigentlichen Löschen des Eintrags wenn pas Singen seine ID funktioniert gut. Allerdings zeigt die Benutzeroberfläche diese Änderung nicht an, ohne dass ich sie manuell aktualisiere, und ich kann nicht herausfinden, warum. Falls es darauf ankommt, führe ich dies auf einem Android-Emulator aus.

Vielen Dank im Voraus für Ihre Hilfe.

Answer 1

Innerhalb Ihrer Löschfunktion müssen Sie auch das Objekt aus dem ObservableArray entfernen.

viewModel.delete = function() { 
    Dialogs.prompt("Task ID", "").then(result => { 
     database.execSQL("DELETE FROM tasks WHERE id = ?", [result.text]).then(id => { 
      Dialogs.prompt(id); 

      /// remove the item from the observable array. 
      this.tasks.splice(INDEX_OF_THE_ITEM_DELETED,1); 


     }, error => { 
      console.log("DELETE ERROR", error); 
     }); 
    }); 
} 

Möglicherweise möchten Sie aus einem Array von Strings zu einem Array von Objekten mit einer id Eigenschaft und value Eigenschaft Ändern der ObservableArray von Aufgaben zu berücksichtigen. So ist es einfacher, den Index des Elements zu bestimmen, das Sie entfernen möchten. Wenn nicht, müssen Sie den Wert neu erstellen, der in das Array geschoben wird, um den Index zu finden.