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

我知道Angular 2 beta每個元素只允許一個指令。使用* ng-for與* ng-if一起使用li元素的最佳做法是什麼？Angular 2：每個元素只有一個指令

當試圖將兩者放在同一個元素上時，我得到以下堆棧跟蹤。

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-如果是第一個子元素'li'標記，它顯然呈現一個空的列表元素。任何人都知道這種情況下的適當策略？

來源

2015-07-03 irth

它不稱爲指令，現在它的組件。另外，他們正在改變很多語法 –

確實存在很多空中傳送，並且指令和控制器以及工廠等都有一個葬禮隊伍。儘管如此，這個問題的堆棧跟蹤仍然指出了指令。我將添加上面的跟蹤文本.. – irth

你在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。

來源

2015-07-04 06:29:30 shmck

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

回答

相關問題