Angular2 ngFor - 跳過如果沒有價值

Question

我有這樣的JSON對象：

data = { 

    "name": "somename", 
    "items": [ 
    { 
     "title": "Item 1", 
     "description": "Some description for item1" 
    }, 
    { 
     "title": "Item 2", 
     "" 
    }, 
    { 
     "title": "Item 3", 
     "description": "Some description for item3" 
    } 
    ] 
} 

什麼是推薦的方式，與RC2，爲* ngFor，並僅顯示有說明的項目？

HTML模板：

<li *ngFor="let item of data.items" class="item"> 
     <div>{{item.title}}</div> 
     <div>{{item.description}}</div> 
</li> 

Answer 1

重複元素上的​​length屬性添加一個*ngIf，並檢查了falsy條件，像這樣：

<ul> 
    <template ngFor let-item [ngForOf]="data.items"> 
     <li class="item" *ngIf="item?.description?.length"> 
      <div>{{item.title}}</div> 
      <div>{{item.description}}</div> 
     </li> 
    </template> 
</ul> 

不能從訪問item變量*ngFor在*ngIf上的相同元素，這就是爲什麼你需要添加一個template標籤封裝li。

---

工作Plunker例如使用