Angular mat-tree：如何在顶部插入新项目？答案

【问题标题】：Angular mat-tree: How to insert new items on top?Angular mat-tree：如何在顶部插入新项目？
【发布时间】：2018-12-12 20:20:25
【问题描述】：

我正在使用 Angular Material 2 Tree 组件。在提供的示例中，当您添加新项目时，编辑框显示在底部，如何将其添加到第一个位置，所以我们总是可以看到添加的编辑框，因为在我的用例中我可以添加很多新项目。

见https://stackblitz.com/angular/gjjyykvkrdll?file=app%2Ftree-checklist-example.ts

【问题讨论】：

标签： angular-material

【解决方案1】：

在您的 ChecklistDatabase 类中，将 insertItem() 方法从 .push 更改为 .splice

/** Add an item to to-do list */
  insertItem(parent: TodoItemNode, name: string) {
    if (parent.children) {
      //parent.children.push({item: name} as TodoItemNode);
      parent.children.splice(0,0,{item: name} as TodoItemNode);
      this.dataChange.next(this.data);
    }
  }

堆栈闪电战

https://stackblitz.com/edit/angular-ifr2tc?embed=1&file=app/tree-checklist-example.ts

【讨论】：

【解决方案2】：

在我的代码中，我使用 unshift()

insertItem(parent: FileNode, name: string) {
const child = <FileNode>{ name: name,'parent_id': parent.parent_id};

if (parent.children) {
  parent.children.unshift(child);
  this.dataChange.next(this.data);
} else {
  parent.children = [];
  parent.children.unshift(child);
  this.dataChange.next(this.data);
}

【讨论】：