在递归列表中添加项目而不刷新答案

【问题标题】：Add item in recursive list without refreshing在递归列表中添加项目而不刷新
【发布时间】：2021-08-31 02:39:10
【问题描述】：

我有一个递归列表，我可以在这个列表的多个级别添加项目。

当我刷新列表时，我想将新项目连接到正确的位置。

预期结果：

object1
   object1.1
   object1.2 //new
object2

当前结果：

  object1
       object1.1     
  object2
  object1.2 //new

HTML

     <ul>
      <ng-container
        *ngTemplateOutlet="recursiveListTmpl; context: { list: list$ | async}">
      </ng-container>
    </ul>

<ng-template #recursiveListTmpl let-list="list">
      <li
        *ngFor="let item of list; let i = index; trackBy: byId"
        class="ui-select-toggle mb-1"
        [class.active]="item.toggle">
        <span> {{ item.code }} - {{ item.name }} </span>

        <ul>
          <div *ngIf="item.toggle">
            <li
              *ngFor="let item2 of item.subList"
              class="ui-select-toggle mb-1"
              [class.active]="item2.toggle"
              [ngValue]="item2" >
              <span> {{ item2.code }} - {{ item2.name}} </span>
...
</ng-template>

  list$ = new BehaviorSubject([]);

  ngOnInit(): void {
    this.getlist();
  }


  byId(index, item) {
    return item.id;
 }

  getlist() {
    this.service.storedList.subscribe(d => this.list$.next(d));    
  }
  //call when a new item in the parent list is added
  refreshList(d){
    this.list$.next(this.list$.value.concat(d))
}

 refreshList2(d) {
    this.list$.value
      .map((x) => x.subList.filter((x) => x.parent_id == d.parent_id))
      .forEach((e) => {
        if (e.length != 0) {
          console.log(e.concat(d));
          e.concat(d);
        }
      });
  }

当我触发第二个函数时，控制台会显示我想要的但新项目没有添加到递归列表中

【问题讨论】：

标签： angular typescript rxjs

【解决方案1】：

我找到了这个，我创建了一个新的BehaviorSubject 然后将参数连接到 subList 并订阅

  refreshList2(d) {
    var subject = new BehaviorSubject([]);
      var parent = this.list$.value.find((x) => x.id == d.parentObject_id);
        subject.next(parent.subList.concat(d));
        subject.subscribe((data) => {
          this.list$.subscribe(() => (parent .subList = data));
        });
  }

【讨论】：