Angular2パーサーエラー予期しないトークン

Question

角度2のシードBS4を使用してangle2アプリを作成しています。 コンポーネントは、パイプを使用し、Angular2-Seed-BS4

を使用しているとき、私はAngular2クイックスタートが、doesntので遊んでいたとき、私は取得を実行するとそれが働いた： - 私は、角の外にこのコードの動作を持っていた

>  EXCEPTION: Template parse errors: Parser Error: Unexpected token | at column 32 in [ngFor let awsoffer of awsoffers| keys2] in 
> AWSOfferListComponent@2:9 ("<h3>AWS Offer List Elements:</h3> <ul> 
> <table [ERROR ->]*ngFor="let awsoffer of awsoffers| keys2"> 
>  <th>{{awsoffer.key}}</th> 
>  <div *ngFor="let awso2 o"): AWSOfferListComponent@2:9 Parser Error: Unexpected token . at column 28 in [ngFor let awso2 of 
> awsoffer.value| keys2] in AWSOfferListComponent@4:9 (" <table 
> *ngFor="let awsoffer of awsoffers| keys2"> 
>  <th>{{awsoffer.key}}</th> 
>  <div [ERROR ->]*ngFor="let awso2 of awsoffer.value| keys2"> 
>  <tr> 
>  <td>{{awso2.key}}</td> "): AWSOfferListComponent@4:9 

-seedプロジェクトでは、ロジックを構造内に移動するときに何かが間違っている必要がありますが、それが何であるかはわかりません。 Googleを検索すると、パイプモジュールがロードされていないことが示されているように見えますが、404エラーは表示されません。

コンポーネント： -

import { Component, OnInit } from 'angular2/core'; 
import { AWSOfferService } from '../../../shared/services/aws-offer.service'; 
import { AWSOffer } from './aws-offer'; 
import { KeysPipe } from '../../../shared/pipes/keys.pipe'; 
import { KeysMultPipe } from '../../../shared/pipes/keys2.pipe'; 




@Component({ 
    selector: 'aws-offer-list', 
    templateUrl: './pages/aws-offers/components/aws-offer-list.html', 
    styles: ['.th {color:red;}'], 
    pipes : [KeysPipe, KeysMultPipe] 
}) 

export class AWSOfferListComponent implements OnInit { 
    constructor (private AWSOfferService: AWSOfferService) {} 
    errorMessage: string; 
    awsoffers: AWSOffer[]; 
    ngOnInit() { this.getAWSOffers(); } 

    getAWSOffers() { 
     this.AWSOfferService.getAWSOffers().subscribe(awsoffers => this.awsoffers = awsoffers, 
             error => this.errorMessage = <any>error); 
    } 
} 

テンプレート： -

<h3>AWS Offer List Elements:</h3> 
<ul> 
    <table *ngFor="let awsoffer of awsoffers| keys2"> 
    <th>{{awsoffer.key}}</th> 
    <div *ngFor="let awso2 of awsoffer.value| keys2"> 
    <tr> 
    <td>{{awso2.key}}</td> 
    <td>{{awso2.value}}</td> 
    </tr> 
    </div> 
    </table> 
</ul> 

パイプの定義： - プロジェクト構造の

import { PipeTransform, Pipe } from 'angular2/core'; 

@Pipe({name: 'keys2'}) 
export class KeysMultPipe implements PipeTransform { 
    transform(value, args:string[]) : any { 
    let keys = []; 
    for (let key in value) { 
     keys.push({key: key, value: value[key]}); 
    } 
    return keys; 
    } 
} 

スクリーンショット。

あなただけが書くことができますbeta.17バージョンとの事前

Answer 1

で

ありがとう：

<div *ngFor="let item of items"> // let instead of # 

Angular2・シード-BS4は角beta.2（https://github.com/start-angular/SB-Admin-BS4-Angular-2/blob/master/package.json#L90）を使用しているため、あなたはこのように記述する必要があります：

<table *ngFor="#awsoffer of awsoffers | keys2"> 
... 
<div *ngFor="#awso2 of awsoffer.value | keys2"> 

は、このリンクはあなたに興味があるかもしれhttps://github.com/angular/angular/blob/master/CHANGELOG.md#user-content-200-beta17-2016-04-28