Angular2 * ngIfテンプレートのオブジェクト配列の長さを確認する


89

https://angular.io/docs/ts/latest/guide/displaying-data.html参照し、スタック* ngIfを使用してAngular2テンプレートの空のオブジェクトをチェックする方法まだ構文エラーのセルフコンテキストが未定義です。* ngIf条件を削除すると、teamMembersの値にアクセスできるように値をプッシュすると、teamMembersの値が取得されます。

私のteamMemberオブジェクトは、[ ] array条件配列がサイズで空であることを確認しようとしています。

試行:

<div class="row" *ngIf="(teamMembers | json) != '{}'">

そして

<div class="row" *ngIf="teamMembers.length > 0"> //Check length great than
                                                 throwing syntax error
            <div class="col-md-12">
                <h4>Team Members</h4>
                <ul class="avatar" *ngFor="let member of teamMembers">
                    <li><a href=""><gravatar-image [size]="80" [email]="member.email"></gravatar-image></a></li>
                </ul>
            </div>
        </div>

コンポーネント:

@Component({
selector: 'pbi-editor',
})
export class AppComponent implements OnInit {
teamMembers: User[];

どんな助けでも素晴らしいでしょう。


「構文エラーのスロー」正確なエラーメッセージは何ですか?
ギュンターZöchbauer

元の例外:例外TypeError:self.context.teamMembers * ngIfための機能=「> 0 teamMembers.length」ではない私は答え、以下の1分のPLSにしようとします
Karthigeyan Vellasamy

回答:


285
<div class="row" *ngIf="teamMembers?.length > 0">

最初の場合には、このチェックがteamMembers値を持っているとあればteamMembers値を持っていない、それがアクセスしようとしないlengthundefined条件の最初の部分はすでに失敗しているため。


3
正しいリンクはsafe navigation operator次のとおり
Michael Czechowski

これにより、演算子 '>'がスローされる可能性があります。タイプ 'boolean'および 'number'には適用できません。--aotまたはPRODでビルドを最適化しながら
krish

18

*ngIf="teamMembers != 0"データが存在するかどうかを確認するために使用できます


2

少しやり過ぎかもしれませんが、作成されたライブラリngx-if-empty-or-has-itemsは、オブジェクト、セット、マップ、または配列が空でないかどうかをチェックします。多分それは誰かを助けるでしょう。ngIfと同じ機能があります(その後、elseおよび 'as'構文がサポートされます)。

arrayOrObjWithData = ['1'] || {id: 1}

<h1 *ngxIfNotEmpty="arrayOrObjWithData">
  You will see it
</h1>

 or 
 // store the result of async pipe in variable
 <h1 *ngxIfNotEmpty="arrayOrObjWithData$ | async as obj">
  {{obj.id}}
</h1>

 or

noData = [] || {}
<h1 *ngxIfHasItems="noData">
   You will NOT see it
</h1>

1

使用できます

<div class="col-sm-12" *ngIf="event.attendees?.length">

なしevent.attendees?.length > 0またはさらにevent.attendees?length != 0

そのため?.length、すでに返すブール値を。

配列内に何かがある場合は表示され、そうでない場合は表示されません。


0

この記事は、なぜそれが私にとってもうまくいかなかったのかを理解するのに大いに役立ちました。Webページの読み込みと、Angular 2がどのように相互作用するかを、私が考えている時点だけでなくタイムラインとして考えることを学びます。他の誰もこの点について言及していなかったので、私は...

* ngIfが必要な理由は、残りのOnInitが発生する前にその変数の長さをチェックしようとし、「lengthundefined」エラーをスローするためです。だからあなたは?を追加する理由です まだ存在しないので、まもなく存在します。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.