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

Question

我有一个Words 列表，由*ngFor 根据hidden 属性显示或隐藏。

请查看plunker。

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

我的想法是默认设置一个.highlight类，并在添加项目后将其删除，平滑transition：

HTML

  <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。 S. 如果我附加了不正确的 plunker 或我的问题有其他问题，请告诉我。

解决方案

首先抱歉描述不完整，我忘了说我想在一段时间后关闭高光。

请查看@Boyan Kostadinov 的回答，然后返回此处获取最终解决方案，final plunker：

新toggleHidden():

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

Answer 1

这会得到你想要的：http://plnkr.co/edit/QxvCte7SvYg3hljBPIlB?p=preview

解释：

为您的单词类添加了新的“突出显示”属性：

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