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:
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.