1

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

请检查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类的新项目。

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

PS如果我附加了不正确的plunker或我的问题有什么问题，请告诉我。

解决方案

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

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

新toggleHidden()：

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

1 回答 1

3

这会给你你想要的：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;
  }
}
于 2016-08-22T17:58:48.757 回答