在ngFor語句中不顯示li

我想不要將<li>元素放到dom中，如果number=-1。

我不能在ngFor裏面寫ngIf所以如果有人能告訴我我會喜歡它的方式。

這裏是想什麼我改善：

<li *ngFor="let number of pagerArray" class="page-item"> 
    <a class="page-link" href="#">{{number}}</a> 
</li>

來源

2017-08-07 rematnarab

的可能的複製[\ * ngIf和\ * ngFor相同元件造成錯誤上]（https://stackoverflow.com/questions/34657821/ngif-and-ngfor-on-same-element-導致錯誤） –

@DavidG。我不認爲這個問題是重複的，因爲問題是不一樣的，你連接的問題是ngforf內部的ngFor問題，這裏是相反的：ngIf在ngFor中。 – Supamiu

使用NG-容器：

是一個邏輯容器，可用於對節點進行分組，但不作爲節點呈現在DOM樹中。

<ng-container *ngFor="let number of pagerArray"> 
    <li *ngIf="number != -1" class="page-item"> 
     <a class="page-link" href="#">{{number}}</a> 
    </li> 
</ng-container>

來源

2017-08-07 13:42:17 Ploppy

您可以使用該array.filter()：

在您的組件：

getPagerArray(){ 
    return this.pagerArray.filter((num) => { 
     return num >= 0; 
    }); 
}

在你的模板

：

<li *ngFor="let number of getPagerArray()" class="page-item"> 
    <a class="page-link" href="#">{{number}}</a> 
</li>

來源

2017-08-07 13:41:40 Supamiu

它將在每個更改檢測週期中執行過濾功能，對於性能解決方案來說並不太安全。 –

這對管道或ngIf來說是一樣的（ngIf不使用過濾器，但它仍然會檢查條件）。所以我不認爲性能損失是胖，但我同意，最好的解決方案將涉及修改用於減少過濾器調用的「OnPush」變化檢測策略。 – Supamiu

那裏有很多方法可以實施。
的一種方式，你可以在一個標籤

<li *ngFor="let number of pagerArray" class="page-item"> 
    <a class="page-link" href="#" *ngIf='number != -1'> 
     {{number}} 
    </a> 
</li>

另外一種方式來做到這一點是通過添加自己的過濾器設置* ngIf如下

<li *ngFor="let number of pagerArray | yourFilter" class="page-item"> 
    <a class="page-link" href="#"> 
     {{number}} 
    </a> 
</li>

來源

2017-08-07 13:42:12

第一條指令將爲DOM添加空的'

'元素。 –

在ngFor語句中不顯示li

回答

相關問題