Создание приложения angular2 с использованием углового 2 семени BS4. Компонент использует трубу, и она работала, когда я играл с Angular2 Quickstart но оленья кожа при использовании Angular2-Seed-BS4Angular2 parser error неожиданный токен
Когда я бегу я получаю: -
> EXCEPTION: Template parse errors: Parser Error: Unexpected token | at column 32 in [ngFor let awsoffer of awsoffers| keys2] in
> [email protected]: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"): [email protected]:9 Parser Error: Unexpected token . at column 28 in [ngFor let awso2 of
> awsoffer.value| keys2] in [email protected]: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> "): [email protected]:9
Я имел этот код работать вне угловой -seed project, поэтому у меня должно быть что-то не так, когда вы двигаете логику внутри структуры, но я не вижу, что это такое. Поиск google, по-видимому, указывает на то, что это связано с тем, что модуль pipe не загружается, но кажется, что это - нет ошибок 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;
}
}
Снимок экрана структуры проекта.
Любые идеи?
Заранее спасибо
Awesome. Это получилось. Огромное спасибо –