टेम्पलेट में Angular2 * ngIf ऑब्जेक्ट ऑब्जेक्ट की लंबाई की जाँच करें

Question

में संदर्भित https://angular.io/docs/ts/latest/guide/displaying-data.html और ढेर का उपयोग कर * ngIf कोणीय 2 टेम्पलेट में खाली वस्तु की जांच कैसे करें अभी भी हो रही सिंटेक्स त्रुटि स्वयं संदर्भ अपरिभाषित। अगर मैं * ngIf कंडीशन को हटा देता हूं तो मुझे टीम मेम्बर्स में वैल्यूज मिल रही हैं अगर मैं इसमें कुछ वैल्यू पुश करता हूं तो मैं टीम मेम्बर्स में वैल्यूज एक्सेस कर सकता हूं।

मेरी teamMemberवस्तु है कि [ ] arrayमैं हालत की जाँच कर रहा हूँ सरणी आकार से खाली है।

कोशिश करता है:

<div class="row" *ngIf="(teamMembers | json) != '{}'">

तथा

<div class="row" *ngIf="teamMembers.length > 0"> //Check length great than
                                                 throwing syntax error
            <div class="col-md-12">
                <h4>Team Members</h4>
                <ul class="avatar" *ngFor="let member of teamMembers">
                    <li><a href=""><gravatar-image [size]="80" [email]="member.email"></gravatar-image></a></li>
                </ul>
            </div>
        </div>

घटक:

@Component({
selector: 'pbi-editor',
})
export class AppComponent implements OnInit {
teamMembers: User[];

कोई भी मदद बहुत अच्छी रहेगी।

Comments

"सिंटैक्स त्रुटि फेंकना" सटीक त्रुटि संदेश क्या है?

— गुंटर ज़ोचबॉयर

मूल अपवाद: TypeError: self.context.teamMembers * ngIf = "teamMembers.length> 0" के लिए एक फ़ंक्शन नहीं है, मैं नीचे दिए गए उत्तर के साथ 1 मिनट की कोशिश करूँगा pls

— Karigigeyan Vellasamy

Answer 1

<div class="row" *ngIf="teamMembers?.length > 0">

यह पहले चेक करता है कि teamMembersक्या कोई वैल्यू है और अगर teamMembersकोई वैल्यू नहीं है, तो यह एक्सेस करने की कोशिश नहीं करता lengthहै undefinedक्योंकि कंडीशन का पहला हिस्सा पहले ही विफल हो जाता है।

Comments

यहाँ सही लिंक है safe navigation operator: angular.io/guide/template-syntax#safe-navigation-operator

— माइकल

यह ऑपरेटर को फेंक सकता है '>' को 'बूलियन' और 'नंबर' पर लागू नहीं किया जा सकता है। जबकि --aot या prod साथ निर्माण के अनुकूलन

— कृष

Answer 2

आप यह *ngIf="teamMembers != 0"जाँचने के लिए उपयोग कर सकते हैं कि क्या डेटा मौजूद है

Answer 3

हो सकता है कि थोड़ी सी ओवरकिल लेकिन बनाई गई लाइब्रेरी ngx-if-blank-or-has-items यह जाँचती है कि कोई ऑब्जेक्ट, सेट, मैप या एरे खाली तो नहीं है। शायद यह किसी की मदद करेगा। यह ngIf (तब, अन्यथा और 'के रूप में' सिंटैक्स समर्थित है) के समान कार्यक्षमता है।

arrayOrObjWithData = ['1'] || {id: 1}

<h1 *ngxIfNotEmpty="arrayOrObjWithData">
  You will see it
</h1>

 or 
 // store the result of async pipe in variable
 <h1 *ngxIfNotEmpty="arrayOrObjWithData$ | async as obj">
  {{obj.id}}
</h1>

 or

noData = [] || {}
<h1 *ngxIfHasItems="noData">
   You will NOT see it
</h1>

Answer 4

आप उपयोग कर सकते हैं

<div class="col-sm-12" *ngIf="event.attendees?.length">

बिना event.attendees?.length > 0या भीevent.attendees?length != 0

क्योंकि ?.lengthपहले से ही बूलियन मान लौटाते हैं ।

यदि एरे में कुछ होगा तो वह इसे प्रदर्शित करेगा और नहीं।

Answer 5

इस लेख ने मुझे यह पता लगाने में मदद की कि यह मेरे लिए क्यों काम नहीं कर रहा है। यह मुझे वेबपेज लोड करने के बारे में एक सबक देता है और कैसे कोणीय 2 एक समयरेखा के रूप में बातचीत करता है और न कि केवल उस समय में जब मैं सोच रहा हूं। मैंने किसी और को इस बिंदु का उल्लेख करते नहीं देखा, इसलिए मैं ...

कारण * ngIf की आवश्यकता है क्योंकि यह OnInit सामान के बाकी होने से पहले उस चर की लंबाई की जांच करने की कोशिश करेगा, और "लंबाई अपरिभाषित" त्रुटि को फेंक देगा। तो तुम क्यों जोड़ते हो? क्योंकि यह अभी तक मौजूद नहीं है, लेकिन यह जल्द ही होगा।