Angular 2
角度 - ForLoop

AngularJS CSS firebase HTML ionic2 ionic-framework JavaScript jQuery Node.js TypeScript
サーチ…


構文

  1. <div * ngFor = "アイテムのアイテムを許可します; let i = index"> {{i}} {{item}} </ div>

備考

*ngFor構造ディレクティブは、コレクション内のループとして実行され、コレクションの各要素に対してHTMLの部分を繰り返します。

@Viewデコレータは廃​​止予定です。開発者は@Componentデコレータにtemplateまたは 'templateUrl'プロパティを使用template必要があります。

角2 for-loop

ライブplnkrのクリックのために... 

<!doctype html>
<html>
<head>
    <title>ng for loop in angular 2 with ES5.</title>
    <script type="text/javascript" src="https://code.angularjs.org/2.0.0-alpha.28/angular2.sfx.dev.js"></script>
    <script>
        var ngForLoop = function () {
            this.msg = "ng for loop in angular 2 with ES5.";
            this.users = ["Anil Singh", "Sunil Singh", "Sushil Singh", "Aradhya", 'Reena'];
        };

        ngForLoop.annotations = [
                new angular.Component({
                    selector: 'ngforloop'
                }),
                new angular.View({
                    template: '<H1>{{msg}}</H1>' +
                            '<p> User List : </p>' +
                            '<ul>' +
                            '<li *ng-for="let user of users">' +
                            '{{user}}' +
                            '</li>' +
                            '</ul>',
                    directives: [angular.NgFor]
                })
        ];

        document.addEventListener("DOMContentLoaded", function () {
            angular.bootstrap(ngForLoop);
        });
    </script>
</head>
<body>
    <ngforloop></ngforloop>
    <h2>
      <a href="http://www.code-sample.com/" target="_blank">For more detail...</a>
    </h2>
</body>
</html>

NgFor - Markup For Loop

NgForディレクティブは、 イテラブルからアイテムごとに1回テンプレートをインスタンス化します。インスタンス化された各テンプレートのコンテキストは、指定されたループ変数を反復可能変数の現在の項目に設定して、外部コンテキストから継承します。

デフォルトのトラッキングアルゴリズムをカスタマイズするため、NgForはtrackByオプションをサポートしています。 trackByは、indexとitemという2つの引数を持つ関数をとります。 trackByが指定されている場合、角度トラックは関数の戻り値によって変化します。 

<li *ngFor="let item of items; let i = index; trackBy: trackByFn">
    {{i}} - {{item.name}}
</li>

追加オプション ：NgForには、ローカル変数に別名を付けることができるいくつかのエクスポートされた値があります。

  • インデックスは各テンプレートコンテキストの現在のループ反復に設定されます。
  • 最初にアイテムが反復の最初のアイテムかどうかを示すブール値に設定されます。
  • lastはアイテムが反復の最後のアイテムかどうかを示すboolean値に設定されます。
  • でもこのアイテムがあってもインデックスを有するかどうかを示すブール値に設定されます。
  • oddは、この項目のインデックスが奇数かどうかを示すブール値に設定されます。

*テーブル行のngFor

<table>
    <thead>
        <th>Name</th>
        <th>Index</th>
    </thead>
    <tbody>
        <tr *ngFor="let hero of heroes">
            <td>{{hero.name}}</td>
        </tr>
    </tbody>
</table>

* ngForコンポーネント

   @Component({
     selector: 'main-component',
     template: '<example-component    
                   *ngFor="let hero of heroes"
                   [hero]="hero"></example-component>'
   })


   @Component({
      selector: 'example-component',
      template: '<div>{{hero?.name}}</div>'
   })

   export class ExampleComponent {
     @Input() hero : Hero = null;
   }

* ng行あたりのX個のアイテム数

例は、行ごとに5つの項目を示します。 

<div *ngFor="let item of items; let i = index">
  <div *ngIf="i % 5 == 0" class="row">
    {{ item }}
    <div *ngIf="i + 1 < items.length">{{ items[i + 1] }}</div>
    <div *ngIf="i + 2 < items.length">{{ items[i + 2] }}</div>
    <div *ngIf="i + 3 < items.length">{{ items[i + 3] }}</div>
    <div *ngIf="i + 4 < items.length">{{ items[i + 4] }}</div>
  </div>
</div>


Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow