简体   繁体   中英

Ionic TypeScript Error (Property 'nav' does not exist on type 'HomePage')

I am following along this Ionic 2 tutorial and encountered problems. The problems are in the TypeScript (See the Picture). Here is the video tutorial I followed .

错误信息

Here are the src/pages/home/home.html :

 <ion-header> <ion-navbar primary *navbar> <ion-title> Tasker </ion-title> <ion-buttons end> <button ion-button icon-only> <ion-icon name="add"></ion-icon> </button> </ion-buttons> </ion-navbar> </ion-header> <ion-content> <ion-list> <ion-item *ngIf="!task.length"> No Task Available <p> Click <ion-icon name="add"> to add task</ion-icon></p> </ion-item> <ion-item-sliding *ngFor="#t of tasks"> <ion-item> <ion-toggle></ion-toggle> <ion-label> <h2 [ngClass]="t.status">{{t.task}}</h2> <p [ngClass]="t.priority">{{t.priority}}</p> </ion-label> </ion-item> <ion-item-options> <button primary><ion-icon name="clipboard"></ion-icon>Edit</button> <button danger><ion-icon name="trash"></ion-icon>Delete</button> </ion-item-options> </ion-item-sliding> </ion-list> </ion-content> 

And the src/pages/home/home.ts Where the error occurred!:

 import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { static get parameters(){ return [[NavController]] } constructor(nav) { this.nav = nav; this.tasks = [ {task:'test1', priority:'low', status:'pending'}, {task:'test2', priority:'high', status:'done'}, {task:'test3', priority:'normal', status:'pending'} ] } } 

There are a few typescript issues I see:

  • You dont need static get parameters function at all.
  • If you are injecting NavController , you can specify it like so:

     constructor(private nav:NavController) { //this.nav = nav; This is not required if you have set access //specifier in constructor parameter // removed rest of code for brevity } 
  • Lastly, if you need to create a class variable in Typescript, you need to declare in the class.

     export class HomePage { tasks:any[]=[] // contstructor and other code } 

Note the reference video seems to be using a much older version of Ionic. I suggest you find a recent tutorial video.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM