ngFor循环出来的数组,在判断上区别可以自定义一个属性给循环出来的当前数组,供使用

来源:互联网 发布:p社 mac 编辑:程序博客网 时间:2024/06/09 19:19

例如:循环出来了一个列表,要求点击不同的项目时,被点击的背景色改变为黄色,字体颜色改变为白色。由于是ngFor循环的所以每一项的类和DOM都是相同的所以很容易造成所有颜色都改变。这个时候给当前的列表定义一个属性:list.classtype就是给list定义了classtype属性。然后在用循环遍历来确定当前点击的,将当前点击的和未点击的区分开来。然后进行样式和事件处理。

下面这个例子是对样式的改变。当点击某一个按钮的时候按钮颜色改变,其余颜色不变。

html:

<span  *ngFor="let list of FQAList;let i=index" (click)="colorChange(i)">    <li *ngIf="list.hot=='1'">        <a  [ngClass]="{'yellow':list.classtype}" href="{{WebUrl}}" >{{list.name}}</a>    </li></span>
ts

   // 点击改变背景色public colorChange(i){    console.log(i);//接收到当前点击的下标    console.log(this.FQAList[i].type_id+"id");   this.FQAList[i].classtype = true;   for(var j=0;j<this.FQAList.length;j++){ //做一个循环判断,当循环的j==i的时候改变背景色。不等的时候也就是其他值的情况下不改变       if(j != i){           this.FQAList[j].classtype = false;       }   }


阅读全文
0 0
原创粉丝点击