1

プロパティに応じてWord表示または非表示にされる のリストがあります。*ngForhidden

プランカーを確認してください。

問題は、リストに大量の単語がある場合、新しい単語がどこに表示されたかを見つけるのが難しいことです。そこで、それらを強調したいと思います。

私の考えは.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 間違ったプランカーを添付したか、質問に何か問題があったかどうか教えてください。

解決

まず、不完全な説明で申し訳ありませんが、しばらくするとハイライトをオフにしたいということを忘れていました。

@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

説明：

words クラスに新しい "highlighted" プロパティを追加しました:

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 に答える