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

我为此线程做出了贡献，因为我遇到了一个类似的问题，所以我猜至少在使用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

Answer 2

您好，将来的访客。如果您也对该问题有疑问，那么解决方案似乎就是这样，似乎直接使用动态组件而不是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>

div包含适当的app-sidebar-nav-item内容似乎可以解决问题。

动态ngFor会留下旧值

2 个答案: