ng2: ngFor loop

Question

में चर बनाने के लिए कैसे मैं एक ngFor पाश में एक चर बनाने के लिए पता लगाने की कोशिश कर रहा हूँ।

<td *ngFor="#prod of products"> 
    <a href="{{getBuild(branch,prod)?.url}}"> 
    {{getBuild(branch,prod)?.status}} 
    </a> 
</td> 

आप देख सकते हैं "getBuild" कॉल कई बार दोहराया जाना है:

मैं इस तरह एक पाश की है। (मेरे वास्तविक उदाहरण में कई बार)। मैं लूप के अंदर एक बार टेम्पलेट में इस चर को बनाने का तरीका चाहूंगा और बस इसका पुन: उपयोग करूंगा। क्या इसे करने का कोई तरीका है?

Answer 1

मुझे लगता है कि स्थानीय चर (# चरित्र के साथ परिभाषित) आपके उपयोग के मामले के लिए लागू नहीं है।

वास्तव में, जब आप किसी HTML तत्व पर स्थानीय चर परिभाषित करते हैं तो यह किसी भी घटक के अनुरूप होता है। जब तत्व पर कोई घटक नहीं होता है, तो चर तत्व को ही संदर्भित करता है।

स्थानीय चर के लिए एक मान निर्दिष्ट करना आपको वर्तमान तत्व से जुड़े एक विशिष्ट निर्देश का चयन करने की अनुमति देता है। उदाहरण के लिए:

<input #name="ngForm" ngControl="name" [(ngModel)]="company.name"/> 

name चर में वर्तमान के साथ जुड़े ngForm निर्देश का उदाहरण स्थापित करेगा।

तो स्थानीय चर आपके इच्छित लक्ष्य को लक्षित नहीं करते हैं, यानी एक लूप के वर्तमान तत्व के लिए बनाए गए मान को सेट करना।

आप ऐसा कुछ करने की कोशिश करते हैं:

<div *ngFor="#elt of eltList" > 
    <span #localVariable="elt.title"></span> 
    {{localVariable}} 
</div> 

आप इस निम्न त्रुटि होगा:

Error: Template parse errors: 
There is no directive with "exportAs" set to "elt.title" (" 
    <div *ngFor="#elt of eltList" > 
    <span [ERROR ->]#localVariable="elt.title"></span> 
    {{localVariable}} 
    </div> 
"): AppComponent@2:10 

Angular2 वास्तव में प्रदान किए गए नाम elt.title यहाँ) मिलान एक निर्देश के लिए लग रहा है ... त्रुटि को पुन: उत्पन्न करने के लिए इस प्लंकर को देखें: https://plnkr.co/edit/qcMGr9FS7yQD8LbX18uY?p=preview

यह लिंक देखें: http://victorsavkin.com/post/119943127151/angular-2-template-syntax, अनुभाग "स्थानीय चर" f या अधिक जानकारी। index, last, even और odd:

यात्रा की वर्तमान तत्व के अलावा, ngFor केवल निर्यात मूल्यों कि स्थानीय चर में एलियास की जा सकती है, का एक सेट प्रदान करता है।https://angular.io/docs/ts/latest/api/common/NgFor-directive.html

आप क्या कर सकता है पाश में तत्व प्रदर्शित करने के लिए एक उप घटक बनाने के लिए है:

यह लिंक देखें। यह वर्तमान तत्व को पैरामीटर के रूप में स्वीकार करेगा और घटक के गुण के रूप में आपके "स्थानीय चर" को बनाएगा। आप घटक के टेम्पलेट में इस विशेषता का उपयोग करने में सक्षम होंगे ताकि यह लूप में प्रति तत्व एक बार बनाया जाएगा।

@Component({ 
    selector: 'elt', 
    template: ` 
    <div>{{attr}}</div> 
    ` 
}) 
export class ElementComponent { 
    @Input() element; 

    constructor() { 
    // Your old "localVariable" 
    this.attr = createAttribute(element.title); 
    } 

    createAttribute(_title:string) { 
    // Do some processing 
    return somethingFromTitle; 
    } 
} 

और जिस तरह से इसका इस्तेमाल करने की:

<div *ngFor="#elt of eltList" > 
    <elt [element]="elt></elt> 
</div> 

Answer 2

नहीं, बस प्रत्येक branch/prod संयोजन के लिए getBuild में परिणाम कैश या जब तक यह पहले की तरह ही मूल्यों के साथ कहा जाता है।

Answer 3

मुझे लगता है कि यह सबकंपोनेंट बनाने के लिए एक क्लासिक मामला है।

<td *ngFor="#prod of products"> 
    <subComp [prod]=prod></subComp> 
</td> 

आपका घटक तो एक prod इनपुट है और OnInit में एक बार आवश्यक समारोह चलाना शामिल है।

सरल उदाहरण फेंकना here