动态ngFor将遗留旧值

Question

我试图在Angular 5中实现一些收藏夹系统，但每次我在列表中添加或删除收藏夹时，显示的列表也会保留旧列表。也就是说，如果我从收藏列表a，b，c开始，然后添加一个新的列表d，我就得到了列表a，b，c，d，a，b，c。例如，这里只有一个收藏：

​

​

这是在我尝试添加一个新的之后：

​

​

效果复合:如果我添加了n个新的收藏夹，我会得到n个副本的列表。这纯粹是一种动态效果，就好像我只是刷新页面一样，列表显示正常。这个问题似乎也不是来自收藏夹数组，因为它似乎从来没有重复的条目

所涉及的基本代码是Clever中使用的侧边栏，修改后的侧边栏用于显示收藏夹列表。涉及到的组件是AppSidebarNavComponent：

export class AppSidebarNavComponent implements OnInit, AfterViewInit
{

  ngAfterViewInit()
  {
    if(this.projectService.fav === null)
    {
      let usersub = this.userService.userObs.subscribe(user =>
      {
        let favs = [];

        this.projectService.loadFavorites(user.id);
        let favsub = this.projectService.favorites.subscribe(data =>
          {
            let favs = [];
            for(let fav of data)
            {
              let name = fav.Program;
              let url = '/geometry/' + fav.projectid;
              let child = {name: name, url: url, icon: 'icon-star', fav: true};
              favs.push(child);
            }
            if(this.navigation[1].hasOwnProperty("children"))
            {
              this.navigation[1]["children"] = favs;
            }
          });
      });
    }
  }


}

组件AppSidebarNavItemComponent：

@Component({
  selector: 'app-sidebar-nav-item',
  template: `
    <li>
      <app-sidebar-nav-link [link]='item'></app-sidebar-nav-link>
    </li>
    <ng-template #dropdown>
      <li>
        <app-sidebar-nav-dropdown [link]='item'></app-sidebar-nav-dropdown>
      </li>
    </ng-template>
    `
})

组件AppSidebarNavLinkComponent

@Component({
  selector: 'app-sidebar-nav-link',
  template: `
    <ng-container>
      <div>
        <a [routerLink]="[link]">
          {{ link.name }}
        </a>
        <a href="javascript:void(0)" (click)="deletefav(link)">
          <i class="icon-close center-full"></i>
        </a>
      </div>
    </ng-container>
  `
})
export class AppSidebarNavLinkComponent {

  public deletefav(link)
  {
    this.projectService.removeFavorite(this.userService.user.id, link.name).subscribe(data =>
    {
      this.projectService.loadFavorites(this.userService.user.id, true);
    });
  }
}

和AppSidebarNavDropdownComponent

@Component({
  template: `
    <a>
      {{ link.name }}
    </a>
    <ul>
      <app-sidebar-nav-item *ngFor="let child of link.children" 
      [item]='child'></app-sidebar-nav-item>
    </ul>
  `
})

我试图在加载收藏夹后完成订阅，但这只会使列表永远不再更新。我尝试手动删除列表中的条目，但Angular似乎不喜欢它，当它试图插入收藏夹时，它就崩溃了。似乎没有其他*ngFor相关组件显示这种行为，我不确定是什么导致了这种行为。

Answer 1

你好，来自未来的访问者。如果你也有这个问题，解决方案似乎是，显然，使用动态组件而不是直接使用HTML代码似乎是问题所在。替换

  <app-sidebar-nav-item *ngFor="let child of link.children" 
  [item]='child'></app-sidebar-nav-item>

使用

  <ng-component *ngFor="let child of link.children">
      <div>
         ...
      </div>
  </ng-component>

其中包含app-sidebar-nav-item的适当内容的div似乎可以做到这一点。

Answer 2

我写这个帖子是因为我刚刚遇到了一个类似的问题，所以我猜有人可以从中受益，至少在使用Clarity Design System的情况下是这样。

我正在使用Clarity Datagrid component来显示搜索结果。尽管结果数组在每次搜索后都会正确更新，但结果仍然会在视图中不断累积，要么使用*ngFor，要么使用Clarity自定义指令*clrDgItems。

我不知道哪个是问题的根源，但我设法解决了这个问题，更新了项目的依赖关系；特别是：

Name                   Version                  Command to update
--------------------------------------------------------------------
@angular/cli           9.0.3 -> 9.0.4           ng update @angular/cli
@angular/core          9.0.2 -> 9.0.4           ng update @angular/core
@clr/angular           2.3.8 -> 3.0.0           ng update @clr/angular