Question

据我所知，Angular 2 beta只允许每个元素使用一个指令。将* ng-for与* ng-if一起用于li元素的最佳实践是什么？

尝试将两者放在同一元素上时，我得到以下堆栈跟踪。

Only one template directive per element is allowed: ng-for var post of postService.state.posts; var $index = index and ng-if cannot be used simultaneously in null

例如，从搜索过滤..我的@view模板代码是

<div>
<h2>Deals</h2>
<input type="text" #ref (keyup)/>
Search: {{ ref.value }}
<ul>
<li *ng-for="var post of postService.state.posts; var $index = index" >
  <p *ng-if="post.value == ref.value || ref.value == '' ">
    {{ post.value + ': $' + post.cost }}
    <br>
    <i> {{ post.qty + ' @ ' + post.drugForm }} </i>
    <small>{{ post.created_at }}</small>
  </p>
</li>

但是，由于* ng-if位于'li'标记的第一个子元素上，它显然会呈现一个空列表元素。任何人都知道这种情况的正确策略吗？

Answer 1

你在Angular 1中看到的是filter，在Angular2中他们是pipes。

<li *ng-for="var post of postService.state.posts; var $index = index">

将成为：

<li *ng-for="var post of postService.state.posts; var $index = index |
 filter(post.value == ref.value || ref.value == '')" >

该过滤器目前尚不存在，但有关pipes in Angular 2

的讨论会有提示

目前，您可以使用带有rx的可观察管道ng-control="query"。

<input type="text" ng-control="query" (keyup)/>
<li *ng-for="var post of postService.state.posts; var $index = index | rx>

您将使用函数处理搜索查询。

search(query){
    return /* map over posts that match and return only matches */
  }

目前，这个API几乎没有最终结果，因此需要大量设置。

查看a working example using the YouTube Search API。

Angular 2：每个元素只有一个指令

1 个答案: