Token imprevisto errore parser Angular2

Question

Creazione di un'app angular2 utilizzando il seme angolare 2 BS4. Il componente utilizza un tubo e ha funzionato quando stavo giocando con l'Angular2 Quickstart, ma pretende molto quando si utilizza Angular2-Seed-BS4

quando ho eseguito io ottenere: -

>  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 

ho avuto questo lavoro di codice al di fuori della angolare -seed progetto quindi devo avere qualcosa di sbagliato quando si sposta la logica all'interno della struttura - ma non riesco a vedere di cosa si tratta. La ricerca su google sembra indicare che non ha a che fare con il modulo pipe, ma sembra che sia - nessun errore 404.

Componente: -

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

Template: -

<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> 

definizione del tubo: -

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; 
    } 
} 

Schermata della struttura del progetto.

Qualche idea?

Grazie in anticipo

Answer 1

Solo con la versione beta.17 si può scrivere:

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

Dal Angular2-Seed-BS4 utilizza beta.2 angolare (https://github.com/start-angular/SB-Admin-BS4-Angular-2/blob/master/package.json#L90) si deve scrivere come questo :

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

Questo collegamento può essere di interesse per voi https://github.com/angular/angular/blob/master/CHANGELOG.md#user-content-200-beta17-2016-04-28