2つの配列とオブジェクトを比較するAngular2と両方に存在するものを削除する

Question

現在、ユーザーが製品にカテゴリを追加できるアプリケーションを作成しています。私はすべてのカテゴリを引き出していますが、それは私のAPIと既にその製品に割り当てられているカテゴリからも存在します。私はオブジェクトの2つの配列を比較したいと思います。カテゴリが既にその製品の割り当てられたカテゴリにある場合、割り当てられる製品のオプションとして表示したくないので、カテゴリに製品を追加できませんそれがすでに割り当てられていることを示します。ここで

は私の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; 
}