角2：只有一个每个单元指令

问题描述

据我了解，角2测试版只允许每个元素一个指令。什么是使用* NG-的结合*最好的做法NG-如果李元素呢？

I understand that Angular 2 beta is only allowing one directive per element. What's the best practice to use *ng-for in conjunction with *ng-if for li elements?

我得到试图将两个相同的元素时，下面的堆栈跟踪。

I get the following stack-trace when attempting to put both on the same element.

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模板code，它的工作原理是

For example, filtering from a search.. My @view template code that works is

<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-如果是礼标签的第一个子元素，它显然呈现一个空表元素。任何人都知道这种情况下适当的策略？

However, since *ng-if is on the first sub-element of 'li' tag, it obviously renders an empty list element. Anyone know a proper strategy for this scenario?

推荐答案

您正在寻找的角1这将是一个过滤器，在Angular2他们是管道。

What you're looking in Angular 1 would be a filter, in Angular2 they're pipes.

＆LT;李·纳克换=postService.state.posts的VAR职务;变量$指数=指数＆GT;

将变为：

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

该过滤器当前不存在，但也有暗示它会在一个关于

现在，你可以使用一个可观察的管道 RX 与 NG-控制=查询。

For now, you can use an observable pipe rx with ng-control="query".

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

您会处理与功能的搜索查询。

You'll process the search query with a function.

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

目前这个API是几乎没有加糖，因为它最终会被，所以它需要的了很多设置即可。

Currently this API isn't nearly as sugared as it will end up being, so it requires a lot of setup.

看一看工作的例子。

这篇关于角2：只有一个每个单元指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！