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

Question

我有一个 Word 的列表，由 *ngFor 根据他们的 hidden 属性.

显示或隐藏

请检查plunker。

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

我的想法是默认设置一个 .highlight class 并在添加项目后将其删除，平滑 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 class.

所以，问题来了：如何检测何时添加了新项目以及究竟添加了哪个项目？这甚至可能吗？或者可能有另一种方法来实现我想要的？

P。 S. 如果我附上了错误的 plunker 或我的问题有其他问题，请告诉我。

解决方案

首先很抱歉描述不完整，我忘了说我想过一会儿关掉高光。

请检查@Boyan Kostadinov 的回答，然后在此处 return 获得最终解决方案，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

说明：

添加了新的 "highlighted" 属性到你的话 class:

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

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

Highlight recently created by*ngFor element in Angular 2

css

angular

typescript

ngfor

解决方案