Ionic: การใช้งานตัวแปร string, number, any, Array

สร้างตัวแปร string, number, any และ Array และแสดงค่าของตัวแปร
list

แก้ไขไฟล์ src/pages/home/home.ts

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' });
  }

}

ตัวแปร fullname เป็นชนิด string
ตัวแปร any เป็นชนิด number
ตัวแปร other เป็นชนิด any
ตัวแปร contacts เป็นชนิด any[]
ตัวแปร groups เป็นชนิด Array

แก้ไขไฟล์ src/pages/home/home.html

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

นำตัวแปรทั้งหมดมาแสดงผล

[BOXMOBILEDEV] Ionic 3 EP2 : ตัวแปรต่างๆและการแสดงผล