我正在使用
aurelia,并希望在视图而不是视图模型中过滤一个集合(数组).
我正在尝试以下语法：
<div class="col-sm-7 col-md-7 col-lg-7 ${errors.filter(function(err){return err.Key==='car.Model';}).length >0? 'alert alert-danger' :''}">
<span repeat.for="error of errors">
<span if.bind="error.Key==='car.Model'">
${error.Message}
</span>
</span>
</div>
我在浏览器控制台中收到以下错误信息：
错误：解析器错误：缺少预期)在[errors.filter(function(err){return err.Key ===’car.Model’;]中的第28列.
这在angularJS中是可能的,如下所示：
<div class="small-7 medium-7 large-7 columns end">
<span class="error" ng-repeat="error in errors | filter:{ Key: 'car.Model'}">
<span class="error-message">
{{error.Message}}
</span>
</span>
</div>
在类似的事情也可能在aurelia？
我也很想知道如何在aurelia中重复进行一个collection / array的过滤(类似于ng-repeat).我尝试以类似的方式使用过滤器功能,但它也没有工作,我有类似的错误.
解决方法
这有点尴尬但经过一番研究(我应该事先做的事情：P)我得到了答案.
可以使用ValueConverter完成,如下所示：http://jdanyow.github.io/aurelia-converters-sample/.
我觉得这很酷
现在我的代码看起来像这样：
<div class="col-sm-7 col-md-7 col-lg-7 alert alert-danger" if.bind="errors | hasPropertyValue:'Key':'car.Model'">
<span repeat.for="error of errors | filterOnProperty:'Key':'car.Model'">
<span>
${error.Message}
</span>
</span>
</div>
我已经在TypeScript(valueconverters.ts)中定义了几个有价值的转换器：
export class FilterOnPropertyValueConverter {
toView(array: {}[],property: string,exp: string) {
if (array === undefined || array === null || property === undefined || exp === undefined) {
return array;
}
return array.filter((item) => item[property].toLowerCase().indexOf(exp.toLowerCase()) > -1);
}
}
export class HasPropertyValueValueConverter {
toView(array: {}[],exp: string) {
if (array === undefined || array === null || property === undefined || exp === undefined) {
return false;
}
return array.filter((item) => item[property].toLowerCase().indexOf(exp.toLowerCase()) > -1).length > 0;
}
}
我终于在我的视图中导入了这些：< import from =“yourPath / valueconverters”>< / import>
