Question

我正在尝试从 indexedDb 中按一个字段的键删除我正在添加但还无法这样做的字段。我必须传递硬代码键值，但我想将键动态传递给删除函数。我正在使用 Angular PWA 应用程序和 Dexie.js 库进行操作，就像通过博客添加在线/离线同步一样。

虽然我能够一次同步和添加/删除所有字段。 但是如何通过传递动态键按钮单击来删除单个字段？？

函数 ERROR TypeError: Cannot read property 'id' of undefined 上的错误 -deleteIndexDb()

所有操作都必须在离线状态下进行

service.ts

export class TodoService {  
  private todos: Todo[] = [];
  private db: any;
        
  constructor(private readonly onlineOfflineService: OnlineOfflineService) {
    this.registerToEvents(onlineOfflineService);    
    this.createDatabase();
  }

  addTodo(todo: Todo) {
    todo.id = UUID.UUID();
    this.todos.push(todo);
    if (!this.onlineOfflineService.isOnline) {
      this.addToIndexedDb(todo);
    }
  }
        
  getAllTodos() {
    return this.todos;
  }
        
  private registerToEvents(onlineOfflineService: OnlineOfflineService) {
    onlineOfflineService.connectionChanged.subscribe(online => {
      if (online) {
        console.log('went online');
        console.log('sending all stored items');
        this.sendItemsFromIndexedDb();
      } else {
        this.deleteIndexDb();
        console.log('went offline, storing in indexdb');
      }
    });
  }

  private createDatabase() {
    this.db = new Dexie('TestDatabase');
    this.db.version(1).stores({
      todos: 'id,value'
    });
  }
        
  private addToIndexedDb(todo: Todo) {
    this.db.todos
      .add(todo)
      .then(async () => {
        const allItems: Todo[] = await this.db.todos.toArray();
        console.log('saved in DB, DB is now', allItems);
      })
      .catch(e => {
        alert('Error: ' + (e.stack || e));
      });
  }

  deleteIndexDb() {
    const allItems: Todo[] = this.db.todos.toArray();
    console.log(allItems[allItems.length - 1].id);
    allItems.forEach((item: Todo) => {
      return this.db.todos.where('id').equals(item.id).delete()
        .then(function (deleteCount) {
           console.log("Deleted " + deleteCount + " rows");
           console.log(`single item ${item.id} deleted locally`);
         }).catch(function (error) {
           console.error("Error: " + error);
         });
      });
  }

  private async sendItemsFromIndexedDb() {
    const allItems: Todo[] = await this.db.todos.toArray();
    allItems.forEach((item: Todo) => {
      this.db.todos.delete(item.id).then(() => {
        console.log(`item ${item.id} sent and deleted locally`);
      });
    });
  }
}

组件：-

todos: Todo[] = []; 

constructor(private readonly todoService: TodoService,
    public readonly onlineOfflineService: OnlineOfflineService) {
    this.form = new FormGroup({
      value: new FormControl('', Validators.required)
    });
}
deleteTodo() {                           <== button click
    this.todoService.deleteIndexDb();
}

HTML：-

<div>
  <ul style="list-style-type: none;">
    <li *ngFor="let item of todos" class="todo-item">
      <span [ngClass]="{ inactive: item.done }">{{ item.value }}</span>
      <button class="todo-item-button" (click)="editUser()">Edit</button>
      <button class="todo-delete-button" (click)="deleteTodo()">Delete</button>
    </li>
  </ul>
</div>

类型错误：无法读取未定义角度的属性“id”

0 个答案: