Błąd parsera Angular2 nieoczekiwany token

Question

Tworzenie aplikacji kątowej2 za pomocą kątowego 2 materiału źródłowego BS4. Komponent używa fajki i to działało, kiedy grałem z Angular2 Szybki start, ale doesnt podczas korzystania Angular2-Seed-BS4

gdy uruchamiam uzyskać: -

>  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 

miałem tę pracę kodu poza kątowa -projekt, więc muszę mieć coś nie tak podczas przenoszenia logiki wewnątrz struktury - ale nie mogę zobaczyć, co to jest. Wyszukiwanie w Google wydaje się wskazywać, że ma to związek z tym, że moduł rur nie jest załadowany, ale wygląda na to, że nie ma błędów 404.

Składnik: -

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

Szablon: -

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

definicja rury: -

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

Zrzut ekranu struktury projektu.

Wszelkie pomysły?

góry dzięki

Answer 1

tylko z wersją beta.17 można napisać:

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

Od Angular2-Seed-BS4 używa kątowy beta.2 (https://github.com/start-angular/SB-Admin-BS4-Angular-2/blob/master/package.json#L90) trzeba pisać tak :

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

Ten link może być interesujące dla ciebie https://github.com/angular/angular/blob/master/CHANGELOG.md#user-content-200-beta17-2016-04-28