Angular2 - 添加課程到點擊項目

我有一堆列表項目，並希望突出每個單擊它。對於我來說，在jQuery甚至JavaScript中做這件事很容易，但是當談到Angular2時，我迷失了方向。Angular2 - 添加課程到點擊項目

<ul> 
    <li [attr.data-selected]="false" (click)="highlightItem($event)" [class.highlight]="isHighlighted($event)" *ngFor="#item of items"> {{item}} </li> 
</ul>

我的組件

export class HelloWorld { 
    items = ["pineapples", "apples", "tomatoes", "bread"]; 

    highlightItem(event) { 
     event.target.setAttribute("data-selected", "true"); 
    } 

    isHighlighted(event) { 
     return event.target.getAttribute("data-selected") == "true"; 
    } 
}

不知道在哪裏我的錯誤是，或者如果我使用了錯誤的方法

來源

2016-06-17 user5680735

你需要在你的類數組存儲的高光亮狀態item：

hightlightStatus: Array<boolean> = [];

聲明與ng關聯的模板中的局部變量For：

<ul> 
    <li [attr.data-selected]="false" 
     (click)="hightlightStatus[i]=!hightlightStatus[i]" 
     [class.highlight]="hightlightStatus[i]" 
     *ngFor="let item of items, let i = index"> 
     {{item}} 
    </li> 
</ul>

來源

2016-06-18 00:05:03

這確實對我來說不太工作，但我相信你是正確的。可能與蹲跳者和我的版本角度 – user5680735

抱歉，忘記提及。你的代碼看起來像Angular 2 beta（'#item of items'，'＃'在測試版中使用）。 Mine - ** Angular 2 RC1 ** –

無用的評論反對stackoverflow規則：超！ – Luther

它可以幫助你

export class ContactComponent implements OnInit { 

    values:Object[]; 


    ngOnInit() { 
    this.values=[{name:'Alex',done:false},{name:'Jon',done:false}]; 
    } 

    completed(i:number){ 
    if(this.values[i]) 
     this.values[i]['done']=!this.values[i]['done']; 
    } 

}

HTML：

<ul> 
    <li *ngFor="let v of values;let i='index'" 
     (click)='completed(i)' 
     [class.checked]="v.done" 
     >  
     {{v.name}}<span class="close">×</span> 
    </li> 
</ul>

來源

2016-09-30 06:35:11

如果我正確理解這個問題，我相信你也可以使用從angular2渲染得到類似的代碼到你的示例代碼。對於我自己的項目，我做了以下內容：

在我的模板，我有：

<li role="presentation" (click)="userTypeSelect($event)" ><a href="#">Local</a></li>

在我的組件，然後我有：

import {Renderer} from '@angular/core'; 
//other imports 

export class SignupComponent implements OnInit { 

     constructor(private render:Renderer) { } 

     userTypeSelect(event:any){ 
     event.preventDefault() 
     this.render.setElementClass(event.target,"active",false); 
     } 

}

值得注意的是，雖然，我沒有使用這是一個項目列表，但我相信它應該仍然有效。

參考了渲染：Renderer Api Docs

來源

2016-10-20 09:23:50 Maleck13

在我的情況下它沒有工作。所以我不得不使用'setElementAttribute'。 'let oldClasses = event.target.getAttribute（'class'）; this.renderer.setElementAttribute（event.target，「class」，oldClasses +'selected'）;'' –

有很多方法可以實現這一點，所有的都非常簡單。

例子：

<li *ngFor="let n of list" (click)="select(n)" [ngClass]="{active: isActive(n)}"> 
    <a>{{n}}</a> 
</li> 

select(item) { 
     this.selected = item; 
    }; 
    isActive(item) { 
     return this.selected === item; 
    };

僅使用HTML

<li *ngFor="let n of list" [class.active]="clicked === n" 
     (click)="clicked = n"> 
     <a>{{n}}</a> 
    </li>

添加類上點擊，如果我們點擊同一

select(item) { 
    this.selected = (this.selected === item ? null : item); 
};

刪除

只有使用HTML

<li *ngFor="let n of list" [class.active]="clicked === n" 
     (click)="clicked = (clicked === n ? null :n)"> 
    <a>{{n}}</a> 
    </li>

More info

來源

2017-12-11 07:04:16 Prashobh

Angular2 - 添加課程到點擊項目

回答

相關問題