Question

尝试使用管道进行过滤，但是当我使用管道索引不再显示在表格中时，找不到什么错误。

<form>
    <label>Search</label>
    <input class="search" placeholder="   Įveskite užsakymo numerį" type="text" [(ngModel)]="orderNumber" [ngModelOptions]="{standalone: true}">
</form>
<table class="table table-hover" *ngIf="orderList.length !== 0">
  <thead>
    <tr>
      <td>Data</td>
      <td>Užsakytos prekės</td>
      <td>Užsakymo nr.</td>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let count of orderList; let i = index">
      <td>{{ date | date:'yyyy-MM-dd HH:mm' }}</td>
      <td>
        <ul>
          <li *ngFor="let product of count">{{ product.name }} {{ product.price }} Eur</li>
        </ul>
      </td>
      <td>{{ i | searchOrder:orderNumber }}</td>
    </tr>
  </tbody>
</table>

这是管道代码

import { Pipe, PipeTransform, Input } from '@angular/core';

@Pipe({
  name: 'searchOrder'
})

export class SearchOrderPipe implements PipeTransform {

  transform(orderList: any, orderNumber: any): any {

    if (orderNumber !== undefined) 
    return orderList.filter(orderNumber);
  }
}

管道代码也可能不好但我可能会想出来，如果我只能让索引显示在表中。我想要做的是在输入字段中输入一个数字并获得包含索引等于我输入的数字的表行，我不认为我可以获得管道的索引值，因为它生成的客栈html甚至无法将其记录在管道代码中< / p>

Answer 1

也许你想要那样的东西：

<form>
    <label>Search</label>
    <input class="search" placeholder="   Įveskite užsakymo numerį" type="text" [(ngModel)]="orderNumber" [ngModelOptions]="{standalone: true}">
</form>
<table class="table table-hover" *ngIf="orderList.length !== 0">
  <thead>
    <tr>
      <td>Data</td>
      <td>Užsakytos prekės</td>
      <td>Užsakymo nr.</td>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let count of orderList | searchorder:orderNumber">
      <td>{{ date | date:'yyyy-MM-dd HH:mm' }}</td>
      <td>
        <ul>
          <li *ngFor="let product of count">{{ product.name }} {{ product.price }} Eur</li>
        </ul>
      </td>
    </tr>
  </tbody>
</table>

和管道

import { Pipe, PipeTransform, Input } from '@angular/core';

@Pipe({
  name: 'searchOrder'
})

export class SearchOrderPipe implements PipeTransform {

  transform(orderList: any, orderNumber: any): any {

    if (orderNumber) {
      return [orderList.[orderNumber]];
    }
    return orderList;
  }
}

所以我过滤了列表，如果orderNumber未定义，管道返回原始数组，或仅包含该行的数组。

过滤管道后未显示角度2指数

1 个答案: