<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>{{title}} - 点赞数{{likeCount}}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">tsdatatype</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-item>
    常见的数据类型：
    {{dataTypeList}}
  </ion-item>

  <ion-item>
    日期类型：
    {{now}}
    日期管道(DatePipe的使用)
    {{now | date:"yyyy-MM-dd"}}
  </ion-item>

  <ion-item>
    Object类型：
    {{student}}
    名称：{{student.name}}
    年龄：{{student.age}}
  </ion-item>

  <ion-item>
    Boolean类型的模板(*ngIf)
    {{isCollection}}
    <ion-icon *ngIf="isCollection" name="star"></ion-icon>
    <ion-icon *ngIf="!isCollection" name="star-outline"></ion-icon>
  </ion-item>

  <ion-list>
    接口描述的Object作为数组元素的显示
    <ion-item>
      直接显示:{{studentList}}
    </ion-item>
    <ion-item>
      下标取元素显示:
      {{studentList[0].name}}
      {{studentList[1].idcard}}
      未定义变量的预取值(需要用?.表明可能不存在的父级Object)
      {{studentList[2]?.name}}
    </ion-item>
    <ion-item>
      数组Object的循环显示(*ngFor)
      <ion-card *ngFor="let student of studentList">
        <ion-card-title>
          {{student?.name}}
        </ion-card-title>
        <ion-card-subtitle>
          {{student?.age}}
        </ion-card-subtitle>
      </ion-card>
    </ion-item>
  </ion-list>

  <ion-list>
    管道:https://angular.cn/guide/pipes
    <ion-item>
      日期格式化
      DatePipe {{now | date:"HH:mm:SS"}}
    </ion-item>
    <ion-item>
      大写转换
      UpperCasePipe {{studentList[0]?.name | uppercase}}
    </ion-item>
    <ion-item>
      JSON调试
      JsonPipe {{studentList[0] | json}}
    </ion-item>
    <ion-item>
      PercentPipe {{0.125 | percent}}
    </ion-item>
  </ion-list>
</ion-content>
