过滤管后未显示 Angular 2 索引答案

【问题标题】：Angular 2 index not showing after filter pipe过滤管后未显示 Angular 2 索引
【发布时间】：2018-07-28 19:00:52
【问题描述】：

试图用管道制作过滤器，但是当我使用管道索引时，表中不再显示，找不到什么问题。

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

管道代码也可能很糟糕，但如果我能让索引显示在表格中，我可能会弄清楚。我想要做的是在输入字段中输入一个数字并获取包含等于我输入的数字的索引的表行，我认为我无法将索引值获取到管道，因为它生成的 inn html 我什至无法将其记录在管道代码中

【问题讨论】：

您没有返回任何要显示的内容，请将 console.log 放入您的管道并检查您是否正确传递了 orderNumber 和索引。角度管道期望返回要在屏幕上打印的内容或布尔值，该值将决定是否显示分配给它的上下文。
但我无法链接这个 i = 管道中的索引它只是看不到它，所以我猜它不知道如何过滤它？我迷路了
如果您移除管道，您将看到索引，因为管道不返回索引，而是一个过滤列表，它无法在模板上显示它{{}}
您要转换索引（这就是 html 所说的）还是列表（这就是 ts 代码所说的）。顺便说一句：代码在 else 情况下缺少返回。
我想要做的是在输入字段中输入一个数字并获取包含等于我输入的数字的索引的表行，我认为我无法将索引值获取到管道，因为它生成的 inn html i甚至不能在管道代码中记录它

标签： angular angular2-pipe

【解决方案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 未定义，管道将返回原始数组，或仅包含该行的数组。

【讨论】：

它几乎可以工作，问题是现在如果我过滤我希望它正确显示的列表项，我显示 {{ product.name }} 和 {{ product.price }} 但日期是索引 0 元素仍然相同
date 与 ngFor 和过滤器无关。模块中必须有一个日期属性