如何将类名添加到 angular 中的一个 HTML 元素 onclick 2
How to add classname to only one HTML element onclick in angular 2
我的 JSON 数据是这样的。
let manageDiscRecords: discRecords[] = [
{
"ID" : 3,
"discRec" : "Some sample record",
"Tasks" : [{
"ID" : 7,
"discParcel" : ["string1", "string2"]
}]
},
{
"ID" : 4,
"discRec" : "Some sample record 2",
"Tasks" : [{
"ID" : 8,
"discParcel" : ["string3", "string4"]
}]
}
];
我的HTML代码是:
<li *ngFor="let parcel of discRecords; let i= index">
<a href="#" #elem id="availRecord_{{i}}" (click)="getDisplay(elem.id)">
{{ parcel.discRec}}
</a>
<ul style="list-style: none; display: none;" id="subRecordHolder_{{i}}">
<li *ngFor="let task of parcel.Tasks; let i= index" [className]="itemAdded">
<ul style="list-style: none; padding-left:0">
<li *ngFor="let discParcel of task.discParcel; let i= index">
<a href="#" #elem id="availSubRecords_{{parcel.ID}}_{{task.ID}}_{{i}}" (click)="getStyle(elem.id, discParcel)">
{{ discParcel}}
</a>
</li>
</ul>
</li>
</ul>
</li>
我的输出是这样的。
Some sample record
- string 1
- string 2
some sample record 2
- string 4
- string 3
现在,我想在单击时应用 class 名称 "clickedNow" 和 "string 1" 元素。你能告诉我如何实现这个吗?
应该这样做:
在您的模板中:
<li *ngFor="let discParcel of task.discParcel; let i= index" [ngClass]="{'clickedNow' : discParcel === clickedElement}" (click)="elementActive(discParcel)">
<a href="#" #elem id="availSubRecords_{{parcel.ID}}_{{task.ID}}_{{i}}" (click)="getStyle(elem.id, discParcel)">
{{ discParcel}}
</a>
</li>
在你的组件中:
let clickedElement : string = '';
elementActive(elem){
this.clickedElement = elem;
}
这样做
<li [ngClass]="{'clickedNow' : clickedElement}" (click)="elementActive(elem)">
{{discParcel}}
<li>
private clickedElement: boolean = false
elementActive(elem){
if(elem == "string1")
this.clickedElement = elem;
}
我的 JSON 数据是这样的。
let manageDiscRecords: discRecords[] = [
{
"ID" : 3,
"discRec" : "Some sample record",
"Tasks" : [{
"ID" : 7,
"discParcel" : ["string1", "string2"]
}]
},
{
"ID" : 4,
"discRec" : "Some sample record 2",
"Tasks" : [{
"ID" : 8,
"discParcel" : ["string3", "string4"]
}]
}
];
我的HTML代码是:
<li *ngFor="let parcel of discRecords; let i= index">
<a href="#" #elem id="availRecord_{{i}}" (click)="getDisplay(elem.id)">
{{ parcel.discRec}}
</a>
<ul style="list-style: none; display: none;" id="subRecordHolder_{{i}}">
<li *ngFor="let task of parcel.Tasks; let i= index" [className]="itemAdded">
<ul style="list-style: none; padding-left:0">
<li *ngFor="let discParcel of task.discParcel; let i= index">
<a href="#" #elem id="availSubRecords_{{parcel.ID}}_{{task.ID}}_{{i}}" (click)="getStyle(elem.id, discParcel)">
{{ discParcel}}
</a>
</li>
</ul>
</li>
</ul>
</li>
我的输出是这样的。
Some sample record
- string 1
- string 2
some sample record 2
- string 4
- string 3
现在,我想在单击时应用 class 名称 "clickedNow" 和 "string 1" 元素。你能告诉我如何实现这个吗?
应该这样做:
在您的模板中:
<li *ngFor="let discParcel of task.discParcel; let i= index" [ngClass]="{'clickedNow' : discParcel === clickedElement}" (click)="elementActive(discParcel)">
<a href="#" #elem id="availSubRecords_{{parcel.ID}}_{{task.ID}}_{{i}}" (click)="getStyle(elem.id, discParcel)">
{{ discParcel}}
</a>
</li>
在你的组件中:
let clickedElement : string = '';
elementActive(elem){
this.clickedElement = elem;
}
这样做
<li [ngClass]="{'clickedNow' : clickedElement}" (click)="elementActive(elem)">
{{discParcel}}
<li>
private clickedElement: boolean = false
elementActive(elem){
if(elem == "string1")
this.clickedElement = elem;
}