在表格中显示特定数据

时间:2019-06-12 13:36:17

标签: html angular typescript

我有一个角度项目,其中有一个我要从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;
    });
  }
}

3 个答案:

答案 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');