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