时间戳

首页 > 解决方案 > 如何在 html 模板中实现这一点

angular - 如何在 html 模板中实现这一点

问题描述

我是 Ionic 3 的新手。我想使用 html 实现整个选择选项逻辑。我已经使用 .ts 文件创建了一个离子选择，但想使用 html 来实现它。

我有接下来七个日期的日期选项。

应用程序.ts

 viewTime(){
 let url = 'http://api.timezonedb.com/v2.1/get-time-zone?key=8304HG08VTGQ&format=json&by=zone&zone=Asia/Kolkata';

    this.http.request(url, this.config.options)
    .map(res => res.json())
        .subscribe((response: any) => {
            console.log(response);
            console.log(response.timestamp);

                var data = response.timestamp - 19800 ;
                    const datePipe = new DatePipe('en-US');
                    const time = datePipe.transform(data*1000, 'h:mm a');
                    console.log(time);

                //const datePipe = new DatePipe('en-US');
                // const serverDate = datePipe.transform(response.timestamp*1000, 'dd/MM/yyyy');
                if(time >='16:00 PM'){

                    data = data+172800;

                    console.log("hello")
                }

                else{

                        data = data+86400;
                     console.log("exit")

                }

     let select = {
         title: 'Select Date',
         // subtitle: 'select via .ts',
         inputs: [],
         buttons: [
   {
     text: 'Cancel',
     role: 'cancel',
    handler: () => {
     console.log('Cancel clicked');
    }
   },
  {
    text: 'Ok',
     handler: () => {  


       console.log(this.newDate);
     }
  }
]
    }
 this.newDate = datePipe.transform(data*1000, 'dd/MM/yyyy');
    for (var i = 1; i < 8; i++) {


 select.inputs.push({name: 'myInput', type: 'radio',label:  this.newDate, value: this.newDate, });
               var value = data+(86400*i);
               this.newDate = datePipe.transform(value*1000, 'dd/MM/yyyy');
                this.dates.push(this.newDate);
          }
      let newAlert = this.alertCtrl.create(select);

                newAlert.present();


                            }, (err) => {
                            let alert = this.alertCtrl.create({
                            title: 'Error',
                            subTitle: 'Please check your credentials',
                            buttons: ['OK']
                                    });
                             alert.present();
                             });
                             }

这是 .ts 文件，我的 html 文件中只有一个按钮，用于调用此函数。viewTime()该app.html文件的文件是什么.ts。

标签： angularionic-frameworkionic3

解决方案

如果你有一个options对象，.ts你可以在你的.html：

<ion-select>
    <ion-option *ngFor="option of options" [value]="option.value">{{option.description}}</ion-option>
</ion-select>

推荐阅读