单击列表项时的Angular 2切换类。 （高亮显示列表中的项目）

Question

我试图在列表中单击项目后更改类，这是我试图这样做的。

<div class="groups">
    <div class="group" *ngFor="#item of items | filter:queryElem.value:'title'">
        <h5>{{item.name}}</h5>
        <ul>
            <li *ngFor="#subItem of item.articles;#i = index">
                <span class="item toplevel" [ngClass]="{'selected': i === selectedIndex}"  href="#test" (click)="LoadArticleDetails(subItem.url,i);">{{subItem.title}}</span>
                <ul>
                    <li *ngFor="#subarticle of subItem.children">
                           <span class="item" href="#test" [ngClass]="{'selected': i === selectedIndex}" (click)="LoadArticleDetails(subarticle.url,i);">{{subarticle.title}}</span>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>


 export class TreeApp implements OnInit {
    selectedIndex = 0;
    LoadArticleDetails(url: string,index:any)
    {
        this.selectedIndex = index;
    }
 }

Answer 1

我认为您需要为项目和子项目使用不同的索引

(function($) { 
    $.fn.count = function (counter_init) {
        defaultOptions = { startCount: counter_init }

        return this.each(function() { 
            var $this = $(this); // Sets the counter start number to zero.              
            $this.text(defaultOptions.startCount + ''); 
            var myInterval = window.setInterval(function () { 
                var currentCount = parseFloat($this.text()); 
                var newCount = currentCount + 1; $this.text(newCount + ''); 
            }, 1000); 
        }); 
    };
})(jQuery); 

jQuery('#counter1, #counter2').count(25);    
console.log($.fn.count(10).defaultOptions.startCount);

<div class="groups">
    <div class="group" *ngFor="#item of items | filter:queryElem.value:'title'">
        <h5>{{item.name}}</h5>
        <ul>
            <li *ngFor="let subItem of item.articles; let i = index">
                <span class="item toplevel" [ngClass]="{'selected': i === selectedIndex}"  href="#test" (click)="LoadArticleDetails(subItem.url,i);">{{subItem.title}}</span>
                <ul>
                    <li *ngFor="let subarticle of subItem.children let j=index">
    <span class="item" href="#test" [ngClass]="{'selected': j === selectedIndexSubItem}" (click)="LoadArticleDetailsSubItem(subarticle.url,j);">{{subarticle.title}}</span>
    </li>

                </ul>
            </li>
        </ul>
    </div>
</div>