如何将类名添加到 angular 中的一个 HTML 元素 onclick 2

Question

我的 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" 元素。你能告诉我如何实现这个吗？

Answer 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; 
}

Answer 2

这样做

<li [ngClass]="{'clickedNow' : clickedElement}" (click)="elementActive(elem)">
  {{discParcel}}
<li>

private clickedElement: boolean = false
elementActive(elem){
    if(elem == "string1")
        this.clickedElement = elem; 
}

如何将类名添加到 angular 中的一个 HTML 元素 onclick 2

How to add classname to only one HTML element onclick in angular 2

angular

ng-class