過濾管始終日誌未定義

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

這是打字稿快捷方式做同樣的事情。請注意，我必須在參數名稱上添加訪問修飾符才能使自動分配生效。您可以使用public或private，但您必須使用一個。