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'속성을 사용해야합니다.

각도 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 - 루프 용 마크 업

NgFor 지시문은 반복 가능 항목에서 항목 당 한 번 템플릿을 인스턴스화합니다. 인스턴스화 된 각 템플리트의 컨텍스트는 주어진 루프 변수가 반복 가능 항목의 현재 항목으로 설정된 외부 컨텍스트에서 상속됩니다.

NgFor는 기본 추적 알고리즘을 사용자 정의하기 위해 trackBy 옵션을 지원합니다. trackBy 는 index와 item이라는 두 개의 인수를 갖는 함수를 취합니다. trackBy 가 주어지면 각도 트랙은 함수의 반환 값에 따라 변경됩니다. 

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

추가 옵션 : NgFor는 로컬 변수에 별명을 지정할 수있는 여러 가지 내 보낸 값을 제공합니다.

  • 인덱스 는 각 템플릿 컨텍스트에 대한 현재 루프 반복으로 설정됩니다.
  • 먼저 항목이 반복의 첫 번째 항목인지 여부를 나타내는 부울 값으로 설정됩니다.
  • last 는 항목이 반복의 마지막 항목인지 여부를 나타내는 부울 값으로 설정됩니다.
  • 심지어이 항목이 짝수 인덱스를 갖고 있는지 여부를 나타내는 부울 값으로 설정한다.
  • 홀수 는이 항목에 홀수 색인이 있는지 여부를 나타내는 부울 값으로 설정됩니다.

* 테이블 행의 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