web-dev-qa-db-ja.com

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

https://angular.io/docs/ts/latest/guide/displaying-data.html およびstack を参照してください。空のオブジェクトをチェックインする方法* ngIf を使用したAngular 2テンプレートでは、構文エラーのセルフコンテキストは未定義のままです。 * 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[];

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

angularangular2-template
67
Karthigeyan
<div class="row" *ngIf="teamMembers?.length > 0">

これはteamMembersが値を持っているかどうかを最初にチェックし、teamMembersが値を持っていない場合は、条件の最初の部分が既に失敗しているのでlengthのundefinedにアクセスしようとしません。

238
Günter Zöchbauer

*ngIf="teamMembers != 0"を使ってデータが存在するかどうかをチェックすることができます

15
AishApp

あなたが使用することができます

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

event.attendees?.length > 0またはevent.attendees?length != 0さえもなし

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

配列の中に何かがあればそれは他のものには表示されません。

1
Druta Ruslan

多少多すぎるが作成されたライブラリ ngx-if-empty-or-items-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>
0
alexKhymenko