九宫格

<ion-header>
  <ion-toolbar style="text-align:center;--background: #6495ED;--color:#FFFFFF">
    <ion-buttons slot="start">
      <ion-back-button  defaultHref=""></ion-back-button>
    </ion-buttons>
    <ion-title style="margin-left:-44px">{{teachClassName}}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content style="--background:#EEEEEE" padding>
  <div class="tips">
    <span style="text-align:center;display: block;color: gray;font-size: 15px;font-weight: bold">同学们输入同样的四个数字，</span>
    <span style="text-align:center;display: block;color: gray;font-size: 15px;font-weight: bold">便可进入上课班</span>
  </div>

  <div style="margin-top: 5%;margin-bottom: 5%;margin-left:20%;margin-right: 20%;">
    <ion-button class="btnText" >{{oneText}}</ion-button>
    <ion-button class="btnText" >{{twoText}}</ion-button>
    <ion-button class="btnText" >{{threeText}}</ion-button>
    <ion-button class="btnText" >{{fourText}}</ion-button>
  </div>

  <ion-item style="--background:#EEEEEE" *ngIf = "users != null">
    <label slot="end">学生:{{students}}人</label>
  </ion-item>

  <div class="btnDiv">
    <hr style="margin-left: 0px; clear:both;">
    <ion-button class="btn" (click)="ChoiceNumber('1')">1</ion-button>
    <ion-button class="btn" (click)="ChoiceNumber('2')">2</ion-button>
    <ion-button class="btn" (click)="ChoiceNumber('3')">3</ion-button>
    <ion-button class="btn" (click)="ChoiceNumber('4')">4</ion-button>
    <ion-button class="btn" (click)="ChoiceNumber('5')">5</ion-button>
    <ion-button class="btn" (click)="ChoiceNumber('6')">6</ion-button>
    <ion-button class="btn" (click)="ChoiceNumber('7')">7</ion-button>
    <ion-button class="btn" (click)="ChoiceNumber('8')">8</ion-button>
    <ion-button class="btn" (click)="ChoiceNumber('9')">9</ion-button>
        
    <ion-button type="button" class="btn" (click)="clearText()">
      <ion-icon name="md-refresh"></ion-icon>
    </ion-button>
    <ion-button class="btn" (click)="ChoiceNumber('0')">0</ion-button>
    <ion-button class="btn" (click)="deleteText()">
      <ion-icon name="md-backspace"></ion-icon>
    </ion-button>
  </div>
  <div *ngIf = "users == null" style="text-align:center">等待学生加入.....</div>
  <div class="userDiv" *ngFor="let user of users;let u = index">
    <div style="float: left;" class="plusimgs" >
        <img src="assets/images/头像.png">
        <img class="deleteimg" style="width:20px" (click)="removeStudent(u)" src="assets/images/删除按钮.png">
      <span #uName style="font-size: 15px;" class="userName">{{user.name}}</span>
    </div>
  </div>
  <div style="float: left" class="plusimgs" >
    <img src="assets/images/添加图标.png" (click)="addStudent()">
    <span #uName style="font-size: 15px;" class="userName">添加</span>
  </div>
</ion-content>
<ion-button id="coming" full large (click) = "createTeachClass()">进入该上课班</ion-button>