NativeScript / nativescript-angular

Integrating NativeScript with Angular
http://docs.nativescript.org/angular/tutorial/ng-chapter-0
Apache License 2.0
1.21k stars 241 forks source link

ListView with angular beta.17: There is no directive with "exportAs" set to "item" #208

Closed NathanWalker closed 8 years ago

NathanWalker commented 8 years ago
parse5_adapter.js:56:75: EXCEPTION: Error: Uncaught (in promise): Template parse errors:
    There is no directive with "exportAs" set to "item" ("  <ListView [items]="nameListService.names | async" row="1" colSpan="2" height="300">
        <template [ERROR ->]#name="item" #odd="odd" #even="even">
"dependencies": {
        "angular2": "2.0.0-beta.17",
        "es6-promise": "^3.0.2",
        "es6-shim": "^0.35.0",
        "nativescript-angular": "0.0.46",
        "parse5": "1.4.2",
        "punycode": "1.3.2",
        "querystring": "0.2.0",
        "reflect-metadata": "0.1.2",
        "rxjs": "5.0.0-beta.6",
        "tns-core-modules": "^2.0.0-angular-4",
        "url": "0.10.3",
        "zone.js": "^0.6.12"
}
matt4446 commented 8 years ago

@NathanWalker there was a breaking change in the newest version of angular ... I think it was a good change overall ... it clears up #item as an element reference over #item as a variable (let item).

ie the for directive looks like this now: from: <nx-list *ngFor="#region of list"> to: <nx-list *ngFor="let region of list">

Does this relate to the problem above? I've misplaced the link to the changeset in angular.

vakrilov commented 8 years ago

From the braking-changes log it looks changing #name="item" to let-name="item" might satisfy the parser.

matt4446 commented 8 years ago

A quick test with rc0

@vakrilov my template seems to bring up undefined for let-nameOfVar it does satisfy the parser however.

project: https://github.com/matt4446/NS-Angular-GridTest

<StackLayout>
  <TextField [(ngModel)]="colsInput" hint="Enter cols"></TextField>
  <TextField [(ngModel)]="rowInput" hint="Enter rows"></TextField>
  <Button text="Build Grid" (tap)="update()"></Button>
  <!-- columns ="*,*,* ... n" effectively --> 
  <GridLayout [auto-grid-columns]="autoCreateColumns" 
              [auto-grid-rows]="autoCreateRows">
      <template ngFor let-row [ngForOf]="rows" let-y="index">
        <template ngFor let-col [ngForOf]="cols" let-x="index"> 
          <Label [col]="col" [row]="row" [text]="x + ',' + y"></Label>
        </template>
      </template>
  </GridLayout>
</StackLayout>

previously template ngFor #row [ngForOf]="rows" #y="index"

image

a quick test with rc0 and row, col, x,y all appear to be undefined unlike the older versions of angular with the hash.

My previous example still works correctly in my other project however: <nx-list *ngFor="let region of list">