CODEWITHSUNDEEP
angularphpstormwebstormngfor
safetyOtter
safetyOtter

Reputation: 1460

Webstorm reports error with code that runs

I'm doing a tutorial on Angular and the following line is getting the "Expecting newline or semicolon" error:

<tr *ngFor='#product of products'>

The code runs fine, how can I get Webstorm to ignore the error? Here's the full text of the template that has the error:

<div class="panel panel-primary">
    <div class="page-header">{{pageTitle}}</div>
    <div class="panel-body">
        <div class="row">
            <div class="col-md-2">Filter By:</div>
            <div class="col-md-4"><input type="text"/> </div>
        </div>
    <div class="row">
        <div class="col-md-6"><h3>Filtered by:</h3></div>
    </div>
    </div>
<div class="table-responsive">
    <table class="table" *ngIf="products && products.length">
       <thead>
        <tr>
            <th><button class="btn btn-primary">Show Image</button> </th>
            <th>Product</th>
            <th>Code</th>
            <th>Available</th>
            <th>Price</th>
            <th>Rating</th>
        </tr>
       </thead>
        <tbody>
        <tr *ngFor='#product of products'>
            <td></td>
            <td>{{product.productName}}</td>
            <td>{{product.productCode}}</td>
            <td>{{product.releaseDate}}</td>
            <td>{{product.price}}</td>
            <td>{{product.starRating}}</td>
        </tr>
        </tbody>
    </table>
</div>
</div>

Upvotes: 1

Views: 656

Answers (2)

Jimbali
Jimbali

Reputation: 2518

I had the same error and restarting didn't help. Turns out that this is an old syntax. As of Angular 2 beta.17 the syntax is changed from

<tr *ngFor='#product of products'>

to

<tr *ngFor='let product of products'>

In my case PHPStorm 2016.3.2 was recognising this new syntax, but my code with the old syntax was compiling because it was set up to use Angular 2 beta.13.

To fix it in my project, I changed the syntax as above, and then in package.json I changed

"dependencies": {
    "angular2": "2.0.0-beta.13",
    "rxjs": "5.0.0-beta.2",
    "zone.js": "0.6.6"
},

to

"dependencies": {
    "angular2": "2.0.0-beta.17",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "0.6.12"
},

and ran npm update. For me this got it all working nicely.

See https://johnpapa.net/angular-2-ngfor/ for more details.

Upvotes: 2

safetyOtter
safetyOtter

Reputation: 1460

Just had to restart webstorm and the error went away. I've run into a few other similar errors where the same solution fixed. Gonna be sad about spending the 50 bucks and use sublime for now.

Upvotes: 0

Related Questions