Css 高亮显示最近由*ngFor元素在Angular 2中创建的

我有一个

Word

s列表，由

*ngFor

根据其

hidden

属性显示或隐藏

请查收

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

我的想法是默认设置一个

.highlight

类，并在添加项目后将其删除，平滑过渡

：

HTML

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

不幸的是，这不起作用，因为新项目已在没有
的情况下创建。突出显示
类

因此，这里有一个问题：如何检测何时添加了一个新项目，以及到底添加了哪个项目？是否可能？或者有没有其他方法可以实现我想要的

另外，请告诉我，我的问题是否附加了错误的plunker或其他错误

解决方案
首先，很抱歉描述不完整，我忘了提及过一会儿我想关闭一个远光灯。

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

新建
切换隐藏（）
：

这将满足您的需求：

说明：

在Word类中添加了新的“突出显示”属性：

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

@组件({
选择器：“我的应用程序”，
管道：[显示文字]，
模板：`
单击行上方的单词以显示/隐藏行下方的单词：
{{item.value}}

{{item.value}}
`
})
导出类AppComponent{
单词：单词[]=[新词（'1'）、新词（'2'）、新词（'3'）、新词（'4'）、新词（'5'）]；
切换隐藏（项目：Word）{
this.words.forEach（（w:Word）=>{w.highlihted=false}）；
item.hidden=！item.hidden；
如果（！item.hidden）item.highlihted=true；
}
}
非常感谢！我发现我遗漏了一些问题描述，但以下是我真正想要的：（受您的解决方案启发）通过“如何检测何时添加了新项目以及确切添加了哪些项目？”您的意思是单击以显示哪些项目？您有将要显示在“toggleHidden”函数中的项，在“if（！item.hidden）”下，您可以使用console.log（item）输出它。我想我不明白你想干什么。
export class Word {
    value:string;
    hidden = false;
    highlihted = false;

    constructor(value: string) {
        this.value = value;
    }
}

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