angular7 * ngFor с фильтром - PullRequest
Новая
       10

angular7 * ngFor с фильтром

0 голосов
/ 18 апреля 2019

Как мне этого добиться?

ngДля элемента списка должно меняться в зависимости от нажатия кнопки, какой статус элемента должен быть истинным 

*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;
    })
  }

1 Ответ

0 голосов
/ 18 апреля 2019

Ваша модель JSON не очень эффективна.Вместо этого сохраните значение статуса.

Используйте ng-container с директивой ngIf

Вам также потребуется создать переменную для selectedStatus в вашем файле .ts. 

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>
...