突出显示Angular 2中*ngFor元素最近创建的内容

我有一个Word s的列表，*ngFor根据它们的hidden属性显示或隐藏。

请检查活塞

问题是当列表中有大量单词时，很难找到新单词出现的位置。所以我想突出显示它们

我的想法是默认设置一个.highlight类，并在项目添加后删除它，使用平滑的transition:

  <div 
     *ngFor="let item of words | shownWords" 
     [ngClass]="{'item':true, 'highlihted': item.hidden}">
     {{item.value}}
  </div>

CSS

.item { background-color: #ffffff; transition: background .3s ease-out; -moz-transition: background .3s ease-out; -webkit-transition: background .3s ease-out; -o-transition: background .3s ease-out; } .item.highlihted { background-color: #ea90aa; }
不幸的是这不起作用，因为新项目已经创建没有.highlight类。
那么，这里有一个问题:如何检测何时添加了新项以及添加了哪些项?这可能吗?或者有别的方法可以达到我的目的?
p。请告诉我是否我附上了错误的柱塞或其他问题。

解决方案
首先为不完整的描述感到抱歉，我忘记提到我想要在一段时间后关闭高亮

请检查@Boyan Kostadinov的答案，然后返回这里获得最终解决方案和最终柱塞:

new toggleHidden():

toggleHidden(item:Word) { item.hidden= !item.hidden; if (!item.hidden) { item.highlihted = true; setTimeout(() => { item.highlihted = false; }, 500); } }

这将得到您想要的:http://plnkr.co/edit/QxvCte7SvYg3hljBPIlB?p=preview

解释:
为words类添加了新的"highlight "属性:

export class Word { value:string; hidden = false; highlihted = false; constructor(value: string) { this.value = value; } }
更改toggleHidden函数:

@Component({ selector: 'my-app', pipes: [ShownWords], template: ` <h2>Click on a word above line to show/hide word below line:</h2> <div *ngFor="let item of words" (click)="toggleHidden(item)">{{item.value}}</div> <hr> <div *ngFor="let item of words | shownWords" [ngClass]="{item:true, highlihted: item.highlihted}"> {{item.value}} </div> ` }) export class AppComponent { words: Word[] = [new Word('one'),new Word('two'),new Word('three'),new Word('four'),new Word('five')]; toggleHidden(item:Word) { this.words.forEach((w:Word) => { w.highlihted = false }); item.hidden= !item.hidden; if (!item.hidden) item.highlihted = true; } }

相关内容

最新更新

热门标签：