angular - 动态 ngFor 留下旧值

问题描述

我正在尝试在 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 相关组件显示此行为，我不确定是什么原因造成的。

标签： angular

你好，来自未来的访客。如果您对该问题也有疑问，那么解决方案似乎显然是，使用动态组件而不是直接使用 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 的适当内容似乎可以解决问题。

angular - 动态 ngFor 留下旧值

问题描述

解决方案

推荐阅读