Question

我正在使用PrimeNG数据表，我面临下一个问题。我发送api电话获取客户名单。此列表是对象数组。每个对象都有一个字段companyId。通过在此管道中使用角度管道和已定义的服务，我正在尝试将特定的companyId与来自数组的公司名称相关联。逻辑非常简单，但出于某种原因，我的网格显示空白。

有人可以帮我解决我的问题吗？我感谢任何帮助

app pipe

import {Pipe, PipeTransform} from '@angular/core';
import {Companies} from "./objects/companies/companies.component";
    @Pipe({
  name: 'CompanyPipe',
})
export class CompanyPipe implements PipeTransform {

  companies: Companies[];
  result: string;

  constructor(private appService: AppServices){}

  transform (value) {
    this.appService.getCompanies()
      .then(response => {
        this.companies = response;
        for (let i = 0; i <  this.companies.length; i ++){
          if (value ==  this.companies[i].id){
            this.result = this.companies[i].name;
          }
        }
        console.log(this.result); // shows correct associated value
        return this.result
      });
  }

app组件

import { Component, OnInit } from '@angular/core';
import {Clients} from './clients.component';
import {AppServices} from "../../app.services";

export interface Clients {
  id;
  companyId;
  subscriptionStartDate;
  active;
}

@Component({
  selector: 'app-clients',
  templateUrl: './clients.component.html',
  styleUrls: ['./clients.component.css']
})
export class ClientsComponent implements OnInit {

  title = "clients".toUpperCase();
  clients: Clients[];

  constructor(private appService: AppServices) { }

  ngOnInit() {
    this.appService.getClients().then(response => this.clients = response);
  }

HTML

<div class="title-toolbar">
  <h3 >{{title}}</h3>
</div>
<p-dataTable>
  <p-column field="companyId" header="Company" [sortable]="true" [filter]="true" filterPlaceholder="Search">
    <template let-row="rowData" pTemplate type="body">
      {{row.companyId | CompanyPipe}}
    </template>
  </p-column>
  <p-column field="subscriptionStartDate" header="Start Date" [sortable]="true" [filter]="true" filterPlaceholder="Search">
    <template let-row="rowData" pTemplate type="body">
      {{row.subscriptionStartDate | date:'medium'}}
    </template>
  </p-column>
  <p-column field="active" header="Active" [sortable]="true" [filter]="true" [style]="{'overflow':'visible'}" filterMatchMode="equals" >
    <template pTemplate="filter" let-col>
      <p-dropdown [options]="activity" [style]="{'width':'100%'}" (onChange)="dt.filter($event.value,col.field,col.filterMatchMode)" styleClass="ui-column-filter"></p-dropdown>
    </template>
    <template let-row="rowData" pTemplate type="body">
      {{row.active | ActivePipe}}
    </template>
  </p-column>
</p-dataTable>

PrimeNG数据表模板返回angular2管道内的空白字段

0 个答案: