สร้างตัวแปร string, number, any และ Array และแสดงค่าของตัวแปร
แก้ไขไฟล์ src/pages/home/home.ts
[code]
import { Component } from ‘@angular/core’;
import { NavController } from ‘ionic-angular’;
@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’
})
export class HomePage {
fullname: string;
age: number;
other: any;
contacts: any[];
groups: Array<{ id: number, name: string }> = [];
constructor(public navCtrl: NavController) {
this.fullname = ‘Jack’;
this.age = 20;
this.other = 20 + ‘ ‘ + this.fullname;
this.contacts = [
{ title: ‘AAA’, contact: ‘111’ },
{ title: ‘BBB’, contact: ‘222’ },
{ title: ‘CCC’, contact: ‘333’ },
{ title: ‘DDD’, contact: ‘444’ }
]
this.groups.push({ id: 1, name: ‘xxx’ });
this.groups.push({ id: 2, name: ‘yyy’ });
this.groups.push({ id: 3, name: ‘zzz’ });
}
}
[/code]
ตัวแปร fullname เป็นชนิด string
ตัวแปร any เป็นชนิด number
ตัวแปร other เป็นชนิด any
ตัวแปร contacts เป็นชนิด any[]
ตัวแปร groups เป็นชนิด Array
แก้ไขไฟล์ src/pages/home/home.html
[code]
<ion-header>
<ion-navbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<p>String : {{fullname}}
<br> Number : {{age}}
<br> Any : {{other}}
<br> Any[] : {{contacts[0].title}} {{contacts[0].contact}}
<br> Array : {{groups[0].id}} {{groups[0].name}}
</p>
<ion-item *ngFor="let contact of contacts">
{{contact.title}} {{contact.contact}}
</ion-item>
<ion-item *ngFor="let group of groups">
{{group.id}} {{group.name}}
</ion-item>
</ion-content>
[/code]
นำตัวแปรทั้งหมดมาแสดงผล