Question

我现在在Angular2中太深了。但卡在一个地方。以下是我的模板代码：

<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 dev工具的控制台窗口没有显示任何与之相关的错误。

请帮忙......

Answer 1

您未正确使用值绑定。 [class.hide]不是有效的属性。方括号用于将属性绑定到值或表达式。就像你在这里一样。

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

您正在尝试进行类绑定，该绑定需要绑定到[ngClass]的值，然后是包含键/值对的对象的表达式。每个键代表类名，每个值代表一个应返回布尔值true或false的表达式。这适用于多个类。

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

如果您的班级名称使用破折号-等特殊字符，则需要将您的密钥包装在引号中。

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

Angular2从模板调用组件的方法

1 个答案: