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; 
}