如何使用`<*ngIf>`和枚举变量显示列表元素

Question

我有一个 Angular 列表，我想用一个枚举变量显示这个列表的元素。例如，如果 enum = 0 则显示所有元素，如果 enum = 1 则仅显示 list.status = true 的元素，如果 enum = 2 则仅显示 list.status = false 的元素。

<ul class="list" style="list-style-type:none">
    <div>
      <li *ngFor="let list of currentList">
        <div>
          <input type="checkbox" class="stat" (click)="status(list)" [(checked)]="list.status" />
          <span class="task">{{list.task}}</span>
          <button class="listBtn" (click)="edit(list)">EDIT</button>
          <button class="listBtn" (click)="remove(list)">REMOVE</button>
        </div>
      </li>
    </div>
  </ul>

Answer 1

您需要一个在检查后返回布尔值的方法，例如

public checkEnum( list: any ): boolean {
  if ( enum == 0 ) {
   return true;
  }
  if ( enum == 1 && list.status == true ) {
   return true;
  }
  if ( enum == 2 && list.status == false ) {
   return true;
  }
  return false;
}

然后在模板中：

    <div *ngIf="checkEnum(list)">
      <input type="checkbox" class="stat" (click)="status(list)" [(checked)]="list.status" />
      <span class="task">{{list.task}}</span>
      <button class="listBtn" (click)="edit(list)">EDIT</button>
      <button class="listBtn" (click)="remove(list)">REMOVE</button>
    </div>

看看有没有帮助。