स्टैक ओवरफ्लो पर यह मेरा पहला प्रश्न है

मैं सिर्फ निम्नलिखित मामले के लिए एक आसान समाधान जानना चाहता था:

<div *ngFor="let d of w.event">
<div class="date" id="d.date" >
              <p>
                <span style="font-size:1.75em">{{d.date | date:'dd'}}</span>
                <br>
                <strong>&nbsp;{{d.date | date:'EEE'}}</strong>
              </p>
            </div>

लूप किए गए div में एक ही आईडी हो सकती है मैं सिर्फ एक विशेष तारीख के साथ पहला div प्रदर्शित करना चाहता हूं और बाकी को अनदेखा कर सकता हूं इसे सीएसएस या जावास्क्रिप्ट के साथ हासिल किया जा सकता है

-4
Akash Mahale 30 मार्च 2018, 09:06

3 जवाब

कक्षा में भी तिथि जोड़ें, फिर आप नीचे दिए गए कोड को आजमा सकते हैं

.YOUR_DATE{
    display:none
}
.YOUR_DATE:first-child{
    displany:inline
}
0
aje 30 मार्च 2018, 06:55

यदि आप एक बार में एक दिखाना चाहते हैं तो आप *ngIf के साथ जा सकते हैं, क्योंकि यह एक समय में केवल एक ही दिखाएगा

<div id="show" *ngIf='your_status'>Yes</div> 
<div id="show" *ngIf='!your_status'>No</div>

आपके प्रश्न अपडेट के बाद, आप कस्टम फ़िल्टर बना सकते हैं जो केवल अद्वितीय तिथि लौटाएगा, इसलिए केवल पहली अनूठी तिथि दिखाई जाएगी

// CREATE A PIPE FILTER :
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'checkUniqueDate'})
export class UniqueDatePipe implements PipeTransform {
  transform(dataArray) {
    let dates = [];
    return dataArray.filter(data => {
        return if(dates.indexOf(data.date) === -1) {
            dates.push(data.date);
            return true;
        } else {
            return false;
        }
    });
  }
}

// TEMPLATE SIDE :
<div *ngFor="let d of (w.event | checkUniqueDate )">
0
Vivek Doshi 30 मार्च 2018, 06:55

सबसे पहले, एचटीएमएल आईडी में एक अद्वितीय चयनकर्ता है, इसलिए एक आईडी को केवल एक तत्व के साथ जोड़ा जा सकता है। यदि आप अपनी वांछित कार्यक्षमता प्राप्त करना चाहते हैं तो आपको दोनों डीआईवी के लिए अलग-अलग आईडी असाइन करनी होगी। और DIV को छिपाने और दिखाने के लिए जावास्क्रिप्ट का उपयोग करें

<div id="showYes">Yes</div> <div id="showNo">No</div>
0
Ajay saini 30 मार्च 2018, 06:15