में अंतर क्या है, तो मैं ng-if और * ng-if के बीच अंतर को समझने की कोशिश कर रहा हूं, लेकिन वे मेरे समान दिखते हैं।एनजी-अगर और * एनजी-अगर कोणीय 2
क्या कोई अंतर है कि मुझे एक दूसरे को चुनने और इन निर्देशों का उपयोग कब करना चाहिए?
में अंतर क्या है, तो मैं ng-if और * ng-if के बीच अंतर को समझने की कोशिश कर रहा हूं, लेकिन वे मेरे समान दिखते हैं।एनजी-अगर और * एनजी-अगर कोणीय 2
क्या कोई अंतर है कि मुझे एक दूसरे को चुनने और इन निर्देशों का उपयोग कब करना चाहिए?
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
अंतर यह है कि दोनों अंगुलर 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>