2016-07-08 24 views
12

में अंतर क्या है, तो मैं ng-if और * ng-if के बीच अंतर को समझने की कोशिश कर रहा हूं, लेकिन वे मेरे समान दिखते हैं।एनजी-अगर और * एनजी-अगर कोणीय 2

क्या कोई अंतर है कि मुझे एक दूसरे को चुनने और इन निर्देशों का उपयोग कब करना चाहिए?

उत्तर

14

ngIf निर्देश है। चूंकि यह एक संरचनात्मक निर्देश (टेम्पलेट-आधारित) है, इसलिए आपको इसे टेम्पलेट्स में उपयोग करने के लिए * उपसर्ग का उपयोग करने की आवश्यकता है।

<template [ngIf]="condition"> 
    <p> 
    Our heroes are true! 
    </p> 
</template> 

समतुल्य:

  • :

    <p *ngIf="condition"> 
        Our heroes are true! 
    </p> 
    

    अधिक जानकारी के लिए इस दस्तावेज़ के देखें

    *ngIf निम्नलिखित वाक्य रचना के लिए शॉर्टकट ("वाक्यात्मक चीनी") से मेल खाती है https://angular.io/docs/ts/latest/guide/structural-directives.html

7

अंतर यह है कि दोनों अंगुलर 2--) में कम से कम वर्तमान संस्करणों में समर्थित नहीं हैं - यह *ngIf या ngIf होना चाहिए।

स्ट्रक्चरल निर्देशों का उपयोग स्पष्ट <template> टैग या अंतर्निहित <template> टैग के साथ किया जा सकता है। अंतर्निहित संस्करण के लिए * यह इंगित करने के लिए आवश्यक है कि यह एक संरचनात्मक निर्देश है।

स्पष्ट

<template [ngIf]="someExpr"> 
    <div>content</div> 
</template> 

या 2.0.0 के बाद से प्राथमिकता दी

<ng-container *ngIf="someExpr"> 
    <div>content</div> 
</ng-container> 

निहित

<div *ngIf="someExpr"></div> 

क्योंकि यह अधिक संक्षिप्त है आम तौर पर आप अंतर्निहित संस्करण का उपयोग करेंगे।

स्पष्ट संस्करण का उपयोग कब करें?

ऐसे मामले हैं जहां निहित संस्करण काम नहीं करता है।

  • आप ngForऔरngIf समर्थन नहीं करने की तरह एक से अधिक संरचनात्मक निर्देश लागू करना चाहते हैं, तो आप इनमें से किसी एक के लिए स्पष्ट फार्म का उपयोग कर सकते हैं।
इस अवैध वाक्य रचना

<div *ngFor="let item of items" *ngIf="!item.hidden"></div> 

आप

<ng-container *ngFor="let item of items"> 
    <div *ngIf="!itemHidden></div> 
</ng-container> 
  • उपयोग कर सकते हैं आप के लिए एक से अधिक तत्व

लिए संरचनात्मक निर्देश लागू करना चाहते हैं के बजाय

उदाहरण के लिए आप कई वस्तुओं को सूचीबद्ध करना चाहते हैं w ith name और price प्रति पंक्ति

<tr> 
    <td *ngFor="???">item.name</td> 
    <td>item.price</td> 
</tr> 

<tr> 
    <ng-container *ngFor="let item of items"> 
    <td>item.name</td> 
    <td>item.price</td> 
    </ng-container> 
</tr>