my * ngForが空の場合の検索方法

私は、次のコードを持っている：彼らは財産isSelected == trueを持っている場合、私は遺物とディスプレイ内のすべての項目を見つけるmy * ngForが空の場合の検索方法

<ng-container *ngFor="let art of artefacts; let i = index"> 
    <div *ngIf="art.isSelected == true" fxLayout="row" class="selected-artefacts"> 
    </div> 
</ng-container>

を。 isSelected = trueのアーティファクトに要素がない場合は、「表示するアイテムがありません」と表示する必要があります。これをどのように達成するのですか？

出典

2017-07-11 Niranjan Shankar

<ng-container *ngFor="let art of artefacts; let i = index"> 
    <div *ngIf="art.isSelected" fxLayout="row" class="selected-artefacts"> 
    <!-- Content --> 
    </div> 
</ng-container> 
<ng-container *ngIf="noneSelected"> 
    <!-- none selected --> 
</ng-container>

お使いのコントローラで

this.noneSelected = this.artefacts.filter(a => a.isSelected).length;

出典

2017-07-11 12:50:50 trichetriche

私はあなたがここで問題間違っだと思います.. –

これは、私はそれを望んでいないのに対し、「人工物」にはデータがありません場合は、「なしコンテンツ」と言いません。 isSelected = trueのアーティファクトに項目がない場合に表示したい。例えば、 'artefacts = [{isSelected：false}、{isSelected：false}、{isSelected：false}]'は 'no content 'を返します。 –

ああ、申し訳ありませんが、私の更新を参照してください – trichetriche

あなたは、単にループの後*ngIf条件を持つことができます。 isSelectedを持つ任意の項目があるかどうかを確認するために使用することができ

hasNoSelectedArtefacts(){ 
    return artefacts.filter(art => art.isSelected).length===0; 
}

Array.prototype.filter：

<ng-container *ngFor="let art of artefacts; let i = index"> 
    <div *ngIf="art.isSelected == true" fxLayout="row" class="selected-artefacts"> 
    </div> 
</ng-container> 
<!-- here --> 
<div *ngIf="!artefacts || hasNoSelectedArtefacts()"> 
    No items to display 
</div>

は、配列を確認し、あなたのコンポーネント側の機能を持っています。あなたは（ | filter）をフィルタリングするためにパイプを使用する場合は

出典

2017-07-11 12:52:56

' compiler.es5.js：1689未知のエラー：テンプレート解析エラー：パーサーエラー：バインディングには[artefacts .filter（art =>！art.isSelected）.length == 0] ' –

更新された回答を確認してください –

働かされた不思議。完璧。 –

そう答えるテキストのみ

<div *ngFor="let item of artefacts">{{item.name}} 
    <input type="checkbox" [(ngModel)]="item.isSelected" (ngModelChange)="tick = tick+1"> 
    </div> 
<hr> 
<ng-container *ngIf="artefacts | isSelected:tick as result; else noItems"> 
    <!-- else is to cover the case where "artefacts" is "null" or "undefined" --> 

    <div *ngFor="let item of result; let i = index" fxLayout="row" 
     class="selected-artefacts">{{item.name}}</div> 

    <!-- the case where the pipe returns an empty array --> 
    <ng-container *ngIf="!result.length" [ngTemplateOutlet]="noItems"></ng-container> 
</ng-container> 

<ng-template #noItems>no Items</ng-template>

StackBlitz example

asが自分の携帯電話上でこれを行うhttps://github.com/angular/angular/blob/master/CHANGELOG.md#400-rc4-2017-03-17

出典

2017-07-11 12:55:07

配列が空の場合、ng-container内部のコードは決して実行されません。だから私は、 "no items"は決して出現しないと思う。条件はループの外側にある必要があります。 – Poney

あなたはそうです。それは愚かな答えです。 ngIfとngForを切り替えると動作する可能性があります。私はコンピュータ上にいるときにもう一度見ます。 –

@Poneyは私の間違いを指摘してくれてありがとう。私は答えを更新し、人生の例を追加しました。 –

で追加された使用することができます。

これを行う方法は、配列の長さが0であるかどうかをチェックすることです。その場合は、あなたが言うメッセージを示すテキストにCSSプロパティをバインドします。

簡単

出典

2017-07-11 13:08:19