Question

我该如何实现？

ngFor列表项应基于按钮click更改，其状态应为

*ngFor="let project of projects | conditionListTrueItem "

Json示例

projects :
 { name:'name one', status: {
    ongoing: true,
    completed: false,
    incomplete: false,
} 
},
 { name:'name two', status: {
    ongoing: false,
    completed: true,
    incomplete: false,
} 
},
 { name:'name three', status: {
    ongoing: false,
    completed: false,
    incomplete: true,
} 
}

html

<button>Ongoing </button> 
<button>completed</button> 
<button>incomplete</button>

<div class="table" *ngFor="let project of projects">
<p>{{project.name}}</p>
</div>

project.ts

ngOnInit() {
    this.projectsService.getAllProjects().subscribe( response => {
      this.projects = response;
    })
  }

Answer 1

您的json模型不是很有效。而是存储状态值。

将ng-container与ngIf指令一起使用

您还需要在.ts文件中为selectedStatus创建变量。

projects :
 { name:'name one', status: 'ongoing'
},
 { name:'name two', status: 'completed'
},
 { name:'name three', status: 'incomplete'
}

<button (click)="selectedStatus = 'ongoing'">Ongoing </button> 
<button (click)="selectedStatus = 'completed'">completed</button> 
<button (click)="selectedStatus = 'incomplete'">incomplete</button>

<ng-container class="table" *ngFor="let project of projects">
  <p *ngIf="project.status === selectedStatus">{{project.name}}</p>
</ng-container>

angular7 * ng用于过滤器

1 个答案: