Question

我有一个Word的列表，*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.请告诉我，如果我附上了不正确的傻瓜或我的问题还有其他错误。

解决方案

首先对不完整的描述感到抱歉，我忘记提及我想在一段时间后关闭高光灯。

请查看@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

说明：

添加了新的＆＃34;突出显示＆＃34;属于你的单词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;
  }
}

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

解决方案

1 个答案: