Angular 2
Ngfor का उपयोग कैसे करें

परिचय

अनियंत्रित सूची उदाहरण

<ul>
  <li *ngFor="let item of items">{{item.name}}</li>
</ul>

अधिक संकलन टेम्पलेट उदाहरण

<div *ngFor="let item of items">
  <p>{{item.name}}</p>
  <p>{{item.price}}</p>
  <p>{{item.description}}</p>
</div>

वर्तमान इंटरेक्शन उदाहरण ट्रैकिंग

<div *ngFor="let item of items; let i = index">
  <p>Item number: {{i}}</p>    
</div>

इस मामले में, मैं सूचकांक का मूल्य लेगा, जो वर्तमान लूप पुनरावृत्ति है।

Angular2 ने निर्यात किए गए मूल्यों को बदल दिया

Angular2 कई निर्यात किए गए मान प्रदान करता है जिन्हें स्थानीय चर के लिए उतारा जा सकता है। य़े हैं:

• सूची
• प्रथम
• अंतिम
• यहाँ तक की
• अजीब

index छोड़कर, अन्य एक Boolean मान लेते हैं। सूचकांक का उपयोग करते हुए पिछले उदाहरण के रूप में, इसका उपयोग इन निर्यात मूल्यों में से किसी एक में किया जा सकता है:

<div *ngFor="let item of items; let firstItem = first; let lastItem = last">
  <p *ngIf="firstItem">I am the first item and I am gonna be showed</p>
  <p *ngIf="firstItem">I am not the first item and I will not show up :(</p>
  <p *ngIf="lastItem">But I'm gonna be showed as I am the last item :)</p>
</div>

* पाइप के साथ ngFor

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'even'
})

export class EvenPipe implements PipeTransform {
    transform(value: string): string {
        if(value && value %2 === 0){
          return value;
        }
    }
}

@Component({
      selector: 'example-component',
      template: '<div>
                      <div *ngFor="let number of numbers | even">
                          {{number}}
                      </div>
                </div>'
})

export class exampleComponent {
    let numbers : List<number> = Array.apply(null, {length: 10}).map(Number.call, Number)
}