Angular2比较两个数组和对象并删除

Question

中的任何一个我正在编写一个应用程序，允许用户向产品添加类别。我拉动每个类别，尽管存在于我的API以及已经分配给该产品的类别。然后我想比较两个对象数组，如果该类别已经在该产品的分配类别中，我不想将其显示为要分配产品的选项，因此您无法将产品添加到类别它已被分配给。

这里是我的API数据的例子：

分配类别产品：

{id: "3", name: "Vitamins and Minerals ", description: "", created_at: "2016-08-15 09:21:05",…} 

在我的应用程序的所有类：

0: 
{id: "1", name: "Detergents and Disinfectants", description: "", created_at: "2016-08-15 09:21:05",…} 
1 
: 
{id: "2", name: "Poultry Equipment", description: "", created_at: "2016-08-15 09:21:05",…} 
2 
: 
{id: "3", name: "Vitamins and Minerals ", description: "", created_at: "2016-08-15 09:21:05",…} 
3 
: 
{id: "4", name: "Gut Health ", description: "", created_at: "2016-08-15 09:21:05",…} 
4 
: 
{id: "5", name: "Rodent, Mite and Fly Control", description: "", created_at: "2016-08-15 09:21:05",…} 
5 
: 
{id: "6", name: "Protective Clothing", description: "", created_at: "2016-08-15 09:21:05",…} 

现在，你可以看到，分配的类别需要从我的类别中删除以显示数组，因此它不是该产品的选项。我似乎无法将它从数组中取出。我已经试过这对视图：

<a *ngIf='allocatedCategories.indexOf(category) === -1'>{{category.name}}<i class='glyphicon glyphicon-plus'></i></a> 

但这并不在控制器上工作，也这样：

alreadyAllocated(category) { 
     for(var i = 0; i < this.allocatedCategories; i++) { 
      if(this.allocatedCategories[i]['id'] == category.id) { 
       return false; 
      } 
     } 
     return true; 
    } 

这里是我的整个组件控制器是否有帮助：

import { Component, Input } from "@angular/core"; 
import { Product } from "../../../../classes/Product"; 
import { ProductService } from "../../../../services/product.service"; 
import { Subscription } from "rxjs"; 
import { ActivatedRoute } from "@angular/router"; 
import { Location } from '@angular/common'; 
import { TabsService } from "../../../../services/tabs.service"; 
import { CategoryService } from "../../../../services/category.service"; 

@Component({ 
    selector: 'product-edit', 
    templateUrl: '/app/views/catalog/products/directives/product-edit.html', 
    moduleId: module.id 
}) 

export class ProductEditComponent { 
    public product:Product; 
    private categories = {}; 
    private allocatedCategories = []; 
    private searchTerm = ''; 
    private _subscription: Subscription; 
    public id: number; 
    public tabs:Array<any> = [ 
     {title: 'General', content: '', active: true, linked: 'general'}, 
     {title: 'Images', content: '', active: false, linked: 'images'}, 
     {title: 'Categories', content: '', active: false, linked: 'categories'}, 
     {title: 'Manufacturers', content: '', active: false, linked: 'manufacturers'} 
    ]; 
    private selectedTab: Object = this.tabs[0]; 

     constructor(
     private _productService: ProductService, 
     private _categoryService: CategoryService, 
     private _activatedRoute: ActivatedRoute, 
     private _location: Location, 
     private _tabsService: TabsService 
    ) { 
     this._tabsService.emitter 
      .subscribe((tab) => { 
       this.tabs.filter((arrayItem) => { 
        if(arrayItem.title === tab.title) { 
         this.selectedTab = arrayItem; 
        } 
       }); 
      },() => { 

      },() => { 

      }); 

    } 

    getProduct() { 
     var self = this; 
     this._productService.getProduct(this.id) 
      .subscribe(
       (product) => { 
        self.product = product[0]; 
       } 
      ); 
    } 

    getCategories(filters) { 
     var self = this; 
     this._categoryService.getCategories(filters) 
      .subscribe((categories) => { 
       self.categories = categories; 
      }); 

    } 

    getAllocatedCategories() { 
     var self = this; 
     this._categoryService.getCategories({ 
      product: self.id 
     }).subscribe((categories) => { 
      self.allocatedCategories = categories; 
     }); 
    } 

    searchCategories() { 
     var self = this; 
     this.getCategories({ 
      'search_term' : self.searchTerm 
     }); 
    } 

    alreadyAllocated(category) { 
     for(var i = 0; i < this.allocatedCategories; i++) { 
      if(this.allocatedCategories[i]['id'] == category.id) { 
       return false; 
      } 
     } 
     return true; 
    } 

    back() { 
     this._location.back(); 
    } 

    ngOnInit() { 
     var self = this; 
     this._subscription = this._activatedRoute.params.subscribe(params => { 
      self.id = +params['id']; 
      this.getProduct(); 
     }); 
     this.getCategories({}); 
     this.getAllocatedCategories(); 
    } 

    ngOnDestroy() { 
     this._subscription.unsubscribe(); 
    } 
} 

任何人都可以看到为什么这不起作用？

谢谢

Answer 1

有什么方法从数组中删除重复的类别？

private removeDuplicatedCategories(prodCategories: any[], toBeRemoved: any[]) { 
    let i: number = 0; 
    while (i < prodCategories.length) { 
     for (let toRem of toBeRemoved) { 
      if (toRem.id === prodCategories[i].id) { 
       prodCategories.splice(i, 1); // remove duplicated 
       continue; 
      } 
     } 
     ++i; 
    } 
} 

上述方法将修改原始数组。相反，如果要保留原始类别数组，您可以使用此方法返回具有非重复类别的另一个数组：

private removeDuplicatedCategories(prodCategories: any[], toBeRemoved: any[]): any[] { 
    let ret: any[] = []; // new array to be returned 
    for (let pc of prodCategories) { 
     let isDup: boolean = false; 
     for (let toRem of toBeRemoved) { 
      if (pc.id === toRem.id) { 
       isDup = true; 
       break; 
      } 
     } 
     if (!isDup) ret.push(pc); // append non-duplicated 
    } 
    return ret; 
}