एसिंक सरणी

Question

में तत्व एक्सेस करना मेरे पास एक angularjs2 ऐप है जो मेरी फायरबेस सेवा से जेसन की एक सूची प्राप्त करता है। मैं सूची के पहले तत्व को एक्सेस और प्रदर्शित करना चाहता हूं।

यहाँ मैं

<h1>{{(chapters | async)?[0].title}}</h1> 

जो मुझे एक खाका पार्स त्रुटि देता है क्या करने की कोशिश की है।

मैं एसिंक सरणी के पहले तत्व को कैसे एक्सेस करूं?

Answer 1

आप इस तरह पाइप का उपयोग कर सकते होगा:

@Pipe({ 
    name: 'first' 
}) 
export class First { 
    transform(val, args) { 
    if (val === null) return val; 
    return val[0]; 
    } 
} 

और अपने html में

<h1>{{ (chapters | async | first)?.title }}</h1> 

Plunker Example

Answer 2

? (सुरक्षित नेविगेशन) केवल . (भिन्नता ऑपरेटर) के साथ काम करता [] (सूचकांक का उपयोग ऑपरेटर) के साथ नहीं

क्या काम हो सकता है

<h1>{{(chapters | async)?.length && (chapters | async)[0].title}}</h1> 

है, लेकिन मुझे यकीन है कि अगर chapters है नहीं कर रहा हूँ दो बार सदस्यता ली। इस मामले में यह एक अच्छा समाधान नहीं होगा। Angular2 टेम्पलेट बाइंडिंग में कुछ deduplication करता है लेकिन | async के बारे में सुनिश्चित नहीं है।

एक और दृष्टिकोण एक संपत्ति के लिए परिणाम आवंटित करने के लिए

ngOnInit() { 
    this.chapters.subscribe(val => this.captersResult = val); 
} 

<h1>{{(chaptersResult?.length && chaptersResult[0].title}}</h1> 

} 

Answer 3

मैं इस तरह यह करना होगा:

<h1>{{((chapters | async) || [])[0]?.title}}</h1>

यह एक अधिक सामान्य समाधान है किसी भी सूचकांक के लिए काम करता है, न केवल पहले।