Question

我正在尝试使用输入过滤表格中的数据。为此，我创建了一个名为textFilter的自定义管道，如下所示：

import {Pipe, PipeTransform} from '@angular/core';
import { Person } from '../Models/person';

@Pipe({ 
    name: 'textFilter',
    pure: false
}) 
export class TextFilterPipe implements PipeTransform {
    transform(people: Person[], filter: string): any {
        if (!people || !filter) {
            return people;
        }
        people.forEach(person => {
           console.log(person.firstName); //<-- this line logs undefined
        });
        console.log(filter);
        return people.filter(person => person.firstName.indexOf(filter) !== -1);
    } 
}

然后我就这样使用它：

<div class="container" >
  <input type="text" [(ngModel)]="query" (keyup)="0" />
  <table>
    <thead>
      <tr>
        <td>First Name</td>
        <td>Last Name</td>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let person of people | textFilter : query">
        <td>{{person.firstName}}</td>
        <td>{{person.lastName}}</td>
      </tr>
    </tbody>
  </table>
</div>

这是我的Component.ts：

import { Component, OnInit } from '@angular/core';
import { Person } from '../../Models/person';

@Component({
  selector: 'app-auto-complete',
  templateUrl: './auto-complete.component.html',
  styleUrls: ['./auto-complete.component.css']

})
export class AutoCompleteComponent implements OnInit{

    constructor() {}

    query: string;
    people: Person[];

    ngOnInit() {
        this.query = '';
        this.people  = [
            new Person ("Shane", "Watson", "Australia"),
            new Person ("David", "Warner", "Australia"),
            new Person ("Ricky", "Ponting", "Australia"),
            new Person ("Adam", "Gilchrist", "Australia"),
            new Person ("Andrew", "Symonds", "Australia"),
            new Person ("Sachin", "Tendulkar", "India"),
            new Person ("Rahul", "Dravid", "India"),
            new Person ("Virender", "Sehwag", "India"),
            new Person ("Mahendra", "Dhoni", "India"),
            new Person ("Virat", "Kohli", "India"),
            new Person ("Gautam", "Gambhir", "India")
        ];
    }
}

这是我的人类：

export class Person {
    firstName: string;
    lastName: string;
    country: string;

    constructor(firstName: string, lastName: string, country: string) {}
}

为什么person.firstName始终在undefined内TextFilterPipe？

更新

如果我记录person而不是person.firstName，那么我会

Person {}

在控制台上打印

Answer 1

export class Person {
    firstName: string;
    lastName: string;
    country: string;

    constructor(firstName: string, lastName: string, country: string) {}
}

如果以上是您的Person类的定义，那么这就是您的问题 - 在您的构造函数中，您正在接收3个字符串值，但您没有对它们做任何事情。您需要将它们分配给您的属性。

所以，你需要这样做：

constructor(firstName: string, lastName: string, country: string) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.country = country;
}

或者最好：

constructor(public firstName: string, public lastName: string, public country: string) {}

这是一个做同样事情的Typescript快捷方式。请注意，我必须在参数名称上放置一个访问修饰符，以使自动分配起作用。您可以使用public或private，但必须使用一个。

过滤器管道始终记录未定义

1 个答案: