* 배열의 두 값에 대해

Plunker * 배열의 두 값에 대해

나는 파이프를 사용하여 각도로 데이터를 포맷하려고합니다. typescript에서 전달 된 배열을 사용하는 헤더 및 필드 이름의 경우 매우 훌륭하게 작동합니다. 문제는 동일한 배열에서 필드 유형을 전달하려고 시도 할 때 각도가이를 허용하지 않는다는 것입니다.

오류는 다음과 같습니다

Error: Uncaught (in promise): Template parse errors: 
Parser Error: Unexpected token '[' at column 23 in [{{tran[col.field] | tran[col.type]}}] in [email protected]:79 
      ("et tran of _trans"><td class="text-navy" *ngFor="let col of cols">[ERROR ->] 
    {{tran[col.field] | tran[col.type]}}</td>

타이프 코드 :

private cols; 
    this.cols = [ 
      { field: "DateCreated", header: "Date", type: "date" }, 
      { field: "Name", header: "Customer", type: "string" }, 
      { field: "Amount", header: "Amount", type : "money" } 
        ];

Angular2 코드 :

<thead> 
            <tr> 
             <th *ngFor="let col of cols">{{col.header}}</th> 
            </tr> 
           </thead> 
           <tbody> 
            <tr *ngFor="let tran of _trans"> 
             <td class="text-navy" 
           *ngFor="let col of cols"> 
           {{tran[col.field] 
           | col.type <--- here's the problem!}} 
           </td> 
           </tr> 
           </tbody>

편집 : 난 그냥에 시도 {{트란 [col.field] + col.type}}에 오류가 없으면 내 데이터 유형 이름이 값과 함께 표시됩니다. 문제가 발생하면 | 당신이 데이터에 의해 파이프를 제공하려면 중간에 ..

는

출처

2016-06-09 Ezi

왜 파이프에 전체'col' 개체를 전달하지 작동? 그렇다면 거기에 타입 체크를해라. – Sasxa

내가 어떻게 그걸 할 수 있는지 알고 싶다. 작은 샘플을 주시겠습니까? – Ezi

다음은 파이프에 객체를 전달하는 예입니다. [plunker] (http://plnkr.co/edit/l5AVp7TqI2vnjt7yDTxe?p=preview) – Sasxa

갱신

,이 같은 작업을해야합니다 :

<td class="text-navy" 
    *ngFor="let col of cols"> 
    {{col.type.tranform(tran[col.field])}}>

원래

당신은 파이프를 누락 파이프의 이름과 매개 변수가 추가됩니다. :

이것은 또한

{{value | pipe:param[propName]}}

출처

2016-06-09 03:58:06

나는 그것을 놓치고 싶지 않다. 나는 배열에서 그것을 제공했고, 데이터가로드 될 때와 똑같이로드되어야한다. – Ezi

배열에서 파이프를 전달할 수 없습니다. 적어도'| '를 사용하려면 파이프 이름을 템플릿에 정적으로 추가해야합니다. 파이프'구문. 파이프는 단지 코드이며 바인딩에서 코드를 호출 할 수 있습니다. –

오, 그게 내 문제 야. 주변에 어떤 일이있어? 템플릿의 모든 필드를 나열하고 싶지 않습니다. 열 목록에서 ngFor를 사용하여 훨씬 더 깨끗합니다 ... 여전히 열의 일부를 포맷해야합니다. – Ezi

* 배열의 두 값에 대해

답변

관련 문제