web-dev-qa-db-ja.com

ng-if配列が空かどうかをチェック

配列にアイテムがない場合、使用しているAPIはこれを返します

items: []

配列にアイテムがある場合、次のようなものを返します

items: [
  {
    name: 'Bla'
  }
]

私のテンプレートでは、ng-ifを使用して、そこにデータがあるかどうかに基づいて要素を表示/非表示にする必要があると思います。

<p ng-if="post.capabilities.items"><strong>Topics</strong>: <span ng-repeat="topic in post.capabilities.items">{{topic.name}}</p>

しかし、Angularで作業するのはこれが初めてなので、完全にベースから外れている可能性があります。

javascriptarraysangularjs
46
TheEks

post.capabilities.itemsは空の配列であるため、引き続き定義されます。post.capabilities.items.lengthをチェックすると、0は偽であるため正常に動作します。

79
Martijn Welker

配列のlengthプロパティが0より大きいことを確認します。

<p ng-if="post.capabilities.items.length > 0">
   <strong>Topics</strong>: 
   <span ng-repeat="topic in post.capabilities.items">
     {{topic.name}}
   </span>
</p>

JavaScriptの配列（オブジェクト）は真の値であるため、初期検証<p ng-if="post.capabilities.items">は、配列が空であっても常にtrueに評価されます。

35
Dmitri Pavlutin

null/undefinedの問題を解決するには、?演算子を使用して存在を確認してください。

<p ng-if="post?.capabilities?.items?.length > 0">

  • サイドノート、Ionic Frameworkの回答を探してこのページにアクセスした場合は、必ず*ngIfを使用してください：

    <p *ngIf="post?.capabilities?.items?.length > 0">
15
Grant