我有一个角度项目,其中有一个我要从api填充的表格。
在表中,列状态具有三个值:1-打开,2-释放,3-拒绝。
显示,
<td>{{working_period.status}}</td>
这是桌子的照片
图片
我想要的是仅显示一个状态的管道。例如:仅1次打开
如何创建这样的管道,这是最好的解决方案吗?
我是ng7的新手。如果需要澄清,请告诉我...请原谅我的语法。
修改 我的dashboard.component.html
<table class="table">
<thead><th>Mitarbeiter</th><th>Einsatz</th><th>Eingangsdatum</th><th>Zeitraum</th><th>Status</th></thead>
<tr *ngFor="let working_period of customers"> ...... <td>{{working_period.status}}</td></tr>
</table>
我的dashboard.component.ts
import {Component, AfterViewInit, OnInit, OnDestroy, ViewChild} from '@angular/core';
import { NgbProgressbarConfig } from '@ng-bootstrap/ng-bootstrap';
import {pipe, of, Subscription} from 'rxjs';
import { first } from 'rxjs/operators';
import { ActivityReportsService } from '../../services/activity-reports.service';
import { CustomerLoginService } from '../../services/customer-login.service';
import {Customer, CustomerResponce} from '../../_models/customer';
@Component({
templateUrl: './dashboard1.component.html',
styleUrls: ['./dashboard1.component.css']
})
export class Dashboard1Component implements OnInit, OnDestroy {
currentUser: Customer;
currentUserSubscription: Subscription;
customers: Customer[] = [];
constructor(
private customerloginservice: CustomerLoginService,
private activityreportservice: ActivityReportsService
) {
this.currentUserSubscription = this.customerloginservice.currentUser.subscribe(customer => {
this.currentUser = customer;
});
}
ngOnInit() {
this.loadAllReports();
}
ngOnDestroy() {
this.currentUserSubscription.unsubscribe();
}
private loadAllReports() {
this.activityreportservice.getAll().subscribe((customers: CustomerResponce) => {
console.log(customers);
this.customers = customers.working_periods;
});
}
}
答案 0 :(得分:0)
尝试一下(SearchPipe.pipe.ts)
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'searchFilter'
})
// Pipe to implement a search filter basd on input
export class SearchPipe implements PipeTransform {
transform(items: any[], searchTerm: string): any[] {
if (!items) { return []; }
return items.filter((val) => {
return val.status === searchTerm;
});
}
}
在HTML中:
<table class="table">
<thead>
<th>Mitarbeiter</th>
<th>Einsatz</th>
<th>Eingangsdatum</th>
<th>Zeitraum</th>
<th>Status</th>
</thead>
<tr *ngFor="let working_period of customers | searchFilter:'open'"> ......
<td>{{working_period.status}}</td>
</tr>
</table>
答案 1 :(得分:0)
请创建1个类似FilterStatusData(filterstatus)的函数,该函数会在api获得响应后调用。
在FilterStatusData中,使用循环修改数据。
答案 2 :(得分:0)
您可以在不使用管道(Dashboard1Component)的情况下对其进行修复
this.customers = customers.working_periods.filter(res=>res.status==='open');