Question

使用角度2种子BS4创建angular2应用程序。该组件使用管道，当我使用Angular2快速入门时它可以工作，但在使用Angular2-Seed-BS4

时没有

当我跑步时，我得到： -

>     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

我已经在angular-seed项目之外使用了这个代码，所以在将逻辑移动到结构中时我必须有一些错误 - 但我不知道它是什么。搜索谷歌似乎表明它与管道模块没有加载，但它似乎是 - 没有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;
  }
}

项目结构的屏幕截图。

有什么想法吗？

提前致谢

Answer 1

只有版本为beta.17，您才能写：

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

由于 Angular2-Seed-BS4 使用角度beta.2（https://github.com/start-angular/SB-Admin-BS4-Angular-2/blob/master/package.json#L90），你必须这样写：

dispatch_async(dispatch_get_main_queue()) {
    //call your performSegueWithIdentifier in here
}

您可能会对此链接感兴趣https://github.com/angular/angular/blob/master/CHANGELOG.md#user-content-200-beta17-2016-04-28

Angular2解析器错误意外令牌

1 个答案: