Question

我有一个数组项列表['Mark', 'John']。

我想在Mark数组中找到items并用一些颜色突出显示它。

我想将highlighted类添加到匹配的li代码

我怎么能做角2？请帮忙

export class AppComponent {
  title = 'app';
  public items = ['Mark', 'John'];
  show: boolean;
  onSubmit(text: string) {
    if (this.items.includes(text)) {
      this.show = true;
    } else {
      this.items.push(text);
      this.show = false;
    }
  }
}

<div class="container">
  <input type="text" #text/>
  <button (click)="onSubmit(text.value)">Add</button>

  <div *ngIf="show">
    Item Already Exits
  </div>

  <div>
    <ul>
      <li *ngFor="let item of items">
        {{item}}
      </li>
    </ul>
  </div>
</div>

Answer 1

您可以有条件地设置角度来检查属性。

<li *ngFor="let item of items" [class.highlighted]="item==='Mark'">{{item}}</li>

* ngFor中的项已在您正在使用它的标记中访问。 [class.highlighted]后跟条件，在这种情况下，只需检查当前项是否等于Mark。如果条件为真，则突出显示仅作为类应用。

希望这有帮助。

为for loops angular 2中的匹配项添加样式

1 个答案: