कोणीय 2 में एक अतिरिक्त तत्व के बिना ngIf का उपयोग करना

107

क्या मैं ngIfएक अतिरिक्त कंटेनर तत्व के बिना उपयोग कर सकता हूं ?

<tr *ngFor="...">
  <div *ngIf="...">
    ...
  </div>
  <div *ngIf="!...">
    ...
  </div>
</tr>

यह तालिका में काम नहीं करता है क्योंकि यह अमान्य HTML बना देगा।

html templates angular

— janispritzkau
स्रोत

जवाबों:

169

ng-containerअधिक पसंद किया जाता है template:

<ng-container *ngIf="expression">

देख:

कोणीय 2 एनजी-कंटेनर

https://github.com/angular/angular.io/issues/2303

— अलेक्जेंडर टेलर
स्रोत

आपको HTML स्निपेट के लिए एक नमूना "जेनरेट" जेनरेट करना चाहिए, जिससे यह स्पष्ट हो सके कि HTML <एनजी-कंटेनर> तत्व निर्मित नहीं हुआ है।

— सेर्गेई

मुझे इसके लिए एक विधि मिली: https://angular.io/docs/ts/latest/guide/template-syntax.html####-template ।

आप बस का उपयोग कर सकते <template>टैग और की जगह *ngIfके साथ [ngIf]इस तरह।

<template [ngIf]="...">
  ...
</template>

— janispritzkau
स्रोत

अच्छा है लेकिन * एनजीआईएफएलएफ एक templateटैग बनाता है , डिफ़ॉल्ट रूप से कोणीय निर्देशों के साथ * एक टेम्पलेट टैग बनाता है। इसलिए दोनों समान हैं[ngIf] and *ngIf

— परदीप जैन

आपके साथ *ngIfटेम्प्लेट के अंदर एक तत्व होता है, यदि आप templateस्वयं लिखते हैं तो आप ऐसा नहीं करते हैं । कुछ परिस्थितियों में अतिरिक्त तत्व हस्तक्षेप कर सकता है।

— सागौन

क्या हम templateटैग tr/ tdटैग लगा सकते हैं ?

— पंकज पारकर

हाँ यह एक विशेष तत्व की तरह है। प्रति परिभाषा यह w3.org/TR/html401/struct/tables.html#h-11.2.3 की अनुमति नहीं है, लेकिन यह काम करेगा और रेंडर करेगा। अगर Iam * ngIf का उपयोग कर रहा है तो यह btw काम नहीं कर रहा है। लेकिन [एनजीआईएफ] के साथ ऐसा होता है। क्या मैं पूछ सकता हूं कि क्या आप मुझे बता सकते हैं कि ऐसा क्यों है?

— sascha10000

@ sascha10000 क्योंकि *ngIf="foo"रैपिंग <template [ngIf]="foo">टैग के बराबर है । संक्षेप में, template+ []== *, तो []! = *। को छोड़कर* किसी भी तत्व में समझ है । template

— फ्रैंकलिन यू

आप divसीधे अंदर नहीं डाल सकते tr, इससे अमान्य HTML बन जाएगा। trइसमें केवल td/ th/ tableतत्व हो सकते हैं और उनके अंदर आपके अन्य HTML तत्व हो सकते हैं।

आप थोड़ा अपने HTML को बदलने के लिए कर सकता है *ngForखत्म हो गया tbodyऔर राशि ngIfसे अधिक trके नीचे ही पसंद है।

<tbody *ngFor="...">
  <tr *ngIf="...">
    ...
  </tr>
  <tr  *ngIf="!...">
    ...
  </tr>
  ..
</tbody>

— पंकज पारकर
स्रोत

यह मूल रूप से समस्या को हल करेगा, लेकिन आप उस मूल क्षमता से व्यापार करेंगे जो आपको tbody के साथ मिलती है। यदि आपके पास एक बड़ी मेज है तो आप सिर को ठीक से स्क्रॉल कर सकते हैं। आपके tbody में tr की भूमिका होगी और tr में एक अतिरिक्त आवरण की भूमिका होगी। यदि शीर्ष पर सिर को स्क्रॉल करने और ठीक करने की कोई आवश्यकता नहीं है, तो यह एक व्यावहारिक समाधान है। मैंने जो कहा उसके लिए मेरा संदर्भ: w3.org/TR/html401/struct/tables.html#h-11.2.3

— sascha10000