2016-08-24 2 views
2
정의되지 않은

의 속성을 읽을 수 없습니다 난 파이프angular 2. 파이프.

@Pipe({ 
    name: 'orgFilter' 
}) 
export class OrgFilterPipe implements PipeTransform { 
    transform(orgs: Organization[], args: String[]): any { 
     console.log(orgs) 
     let filter = args[0].toLowerCase(); 
     return filter ? orgs.filter((org:Organization) => org.name.toLowerCase().indexOf(filter) != -1): orgs; 
} 

을 만들어 HTML에서 사용 : 84 형식 오류 : 내가 오류를 browser_adapter.js을 얻고있다

<tbody> 
     <tr *ngFor="#organization of organizations | orgFilter:listFilter.value"> 
      <td>{{ organization.organizationName }}</td> 
      <td>{{ organization.city }}</td> 
      <td>{{ organization.state }}</td> 
      <td>{{ organization.country }}</td> 
      <td> 
       <i class="material-icons">mode_edit</i> 
      </td> 
      <td> 
       <i class="material-icons">delete</i> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <div class="col-md-4"><input type="text" #listFilter (keyup)="0" /></div> 
      </td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
     </tr> 
</tbody> 

을 속성을 읽을 수 없습니다 '와 toLowerCase를' 정의되지 않은 의 t.transform (orgFilter.ts : 9)

문제는 let filter = args [0] .toLowerCase();에 있습니다.

무엇이 원인입니까? args에 값이 없다는 것을 의미합니까? 어딘가에 선언해야합니까? html로 파이프를 잘못 사용하고 있습니까? 파이프를 제거하면 데이터가있는 표가 나타납니다. 하지만 html로 넣으면 데이터가 사라지고 테이블에이 입력 필드 만 있습니다

답변

0

제공된 템플릿을 사용하면 Organization 인스턴스에 "name"이라는 멤버가 없지만 "organizationName"이라는 멤버가없는 것처럼 보입니다. 대신.

어쩌면 당신은 당신의 코드에서

org.organizationName.toLowerCase().indexOf(filter) != -1 

org.name.toLowerCase().indexOf(filter) != -1 

를 교체 시도 할 수 있습니다.

UPDATE, 당신은 당신이 표현을 필터링 바인딩의 다른 방법을 시도 할 수 있습니다 말했다

:

@Pipe({ 
    name: 'orgFilter' 
}) 
export class OrgFilterPipe implements PipeTransform { 
    transform(orgs: Organization[], expression:string): any { 
     if(!expression){ 
      return orgs; 
     } 
     else { 
      return orgs.filter((org:Organization) => org.organizationName.toLowerCase().indexOf(expression) != -1) 
     } 
} 
식 구성 요소의 회원을 의미

,의 말을하자

filterExpression: string; 

입력 텍스트를 다음으로 변경하십시오.

사용 불순한로 파이프를 선언 할 수 있습니다 목록 필터에 대한 documentation에 따르면

<tr *ngFor="#organization of organizations | orgFilter:filterExpression"> 

:

<input type="text" [(ngModel)]="filterExpression"> 

하고 파이프 전화를 변경

@Pipe({ 
    name: 'orgFilter', 
    pure: false 

}) 
+0

난 것을 시도하지만, 작동하지 않았다. 문제는 let filter = args [0] .toLowerCase();에있다. 이 오류는 args에 의해 발생한다는 것을 의미합니까 (정확하게 이해한다면 단어로 필터링하고 싶습니다). 값이 없습니다. 하지만 방금 페이지를 열면 값을 가질 수 없습니다. 권리? – rigby

+0

좋은 지적. 답변을 업데이트 중입니다. – 36ve

+0

정말 고마워요. 그것은 일했다! – rigby

0

args 중 하나가 정의되지 않거나 org.name이 정의되지 않았습니다. DevTools에서 디버깅을 시도 할 수도 있습니다. transform()