Question

我有一个这样的模板：

<div>
    <span class="tag label label-primary" *ngFor="let tag of tags">
        {{ tag }}
    </span>
</div>

我的组件中有一个函数addTag(tag)，只允许将标记添加到数组中，如果它还不存在的话。

private addTag(tag) {
    // Checks if the tag is empty or only consists of whitespace
    // or is already in tags array
    if (tag.replace(/\s/g, "").length == 0 || _.contains(this.tags, tag))
        return;

    this.tags.push(tag.trim());
}

如果用户尝试添加已存在的标记，我想要闪现（将不透明度设置为零并使用setInterval将其增加）现有标记。

如何更改正确span元素的不透明度？

Answer 1

<div>
    <span [style.opacity]="flash" class="tag label label-primary" *ngFor="let tag of tags">
        {{ tag }}
    </span>
</div>

组件类中flash属性的值将在元素样式上设置。

替代：

<div>
    <span [ngStyle]="{opacity:flash}" class="tag label label-primary" *ngFor="let tag of tags">
        {{ tag }}
    </span>
</div>

Answer 2

您可以尝试这样的事情：

<span [ngClass]="{flash:i==flashIndex}" class="tag" *ngFor="let tag of tags;let i = index">
  {{ tag }}
</span>
...
flashIndex: number;
tags: Array<string> = [];
addTag(tagInput) {
  let tag = tagInput.value;
  if (!tag.replace(/\s/g, "").length) return;

  const existedItem = this.tags.find(x => x === tag); 

  if (existedItem) {
     this.flashIndex = this.tags.indexOf(existedItem);
     setTimeout(()=> this.flashIndex = -1, 1000);
     return;
  }

  this.tags.push(tag.trim());
  tagInput.value = '';
}

参见相应的plunker

在没有类的情况下更改* ngFor内特定元素的样式

2 个答案: