मेरे पास डेटाबेस से पुनर्प्राप्त वस्तुओं की एक सरणी है। यह सूची लगातार बदलती रहती है इसलिए एचटीएमएल पर प्रदर्शित सूची गतिशील रूप से बदलती है। मैं सूची से केवल चयनित आइटम को हाइलाइट करना चाहता हूं लेकिन चयन पर पूरी सूची को हाइलाइट किया जा रहा है।

कोणीय 2 में HTML कोड निम्नलिखित है:

<div class="list-group " *ngFor="let year of years">
              
            <a routerLink="records" routerLinkActive="active" class="list-group-item list-group-item-action">
                <mdb-icon fas icon="table" class="mr-3"></mdb-icon>{{year}}</a>
                
        </div>

किसी आइटम का चयन करने पर सूची को इस प्रकार देखा जाता है

1
Akhilesh Pothuri 28 अक्टूबर 2019, 09:58

1 उत्तर

सबसे बढ़िया उत्तर

अपना मॉडल बदलें ताकि आपकी वस्तु में वर्ष आईडी, शीर्षक और चयनित वर्ष शामिल हो। फिर उस वर्ष की एक सरणी है और क्लिक पर उस वर्ष का चयन करें और दूसरों को हटा दें। फिर ngCLass में css को संशोधित करें और उपयुक्त css जैसे अस्पष्टता, रंग आदि के साथ सक्रिय वर्ग सेट करें।

<div class="list-group ">
<a *ngFor="let year of years" routerLink="records" routerLinkActive="active" class="list-group-item list-group-item-action">
  <mdb-icon (click)="setSelected(years, id)" fas icon="table" class="mr-3" [ngClass]="{ 'active': year?.selected }"></mdb-icon>{{year?.title}}</a>
 </div>

और समारोह होगा:

    setSelected(years: Year[], id: number) {

    if (!years) {
    return;
    }

    this.years.map( year => {

      return {
       ...year,
       selected: (year.id === id)
      });
    }
0
Miroslav Maksimovic 2 नवम्बर 2019, 12:28