テンプレートからのコンポーネントのAngular2呼び出しメソッド

Question

私は今Angular2で深すぎます。しかし、1つの場所で立ち往生してください。私のテンプレートコードは以下の通りです：

<div class="container" *ngFor="let group of groupList"> 
       <div class="row"> 
        <div class="col-xs-12"> 
         <some-child-component [store]="group[0]" [class.hide]="evalStore(group[0])"></some-child-component> 
        </div> 
      </div> 
    </div> 

私はテンプレートからevalStore(group[0])メソッドを呼び出しています。このメソッドは、以下に示すようにそれぞれのコンポーネントクラスに存在します。

evalStore(item:any) { 
    console.log('inside evalStore'); 
    if(item === undefined){ 
     return false; 
    } else { 
     return item.type !== 'store'; 
    } 
    } 

何らかの理由により、このメソッドは呼び出されません。 Chrome開発ツールのコンソールウィンドウに関連するエラーは表示されません。

助けてください...

Answer 1

あなたは間違って結合値を使用しています。 [class.hide]は有効な属性ではありません。角括弧は、属性を値または式にバインドするために使用します。あなたがここにいるように。

<div [store]="group[0]"> 

あなたは、キー/値のペアのオブジェクトを含む式、その後[ngClass]に結合した値を必要とし、バインディング・クラスをやろうとしています。各キーはクラス名を表し、各値はブール値trueまたはfalseを返す式を表します。これは複数のクラスで動作します。

<div [ngClass]="{hide: evalStore(group[0])}"> 

あなたのクラス名が引用符であなたの鍵をラップする必要があります-ダッシュなどの特殊文字を使用している場合。

<div [ngClass]="{'hide-me': evalStore(group[0])}">