Question

我对Ionic 3还是陌生的。我想使用html来实现整个选择选项逻辑。我已经使用.ts文件创建了ion-select，但希望使用html来实现。我有一个日期选择项，接下来有七个日期。.
app.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文件是什么。帮我解决这个问题。

Answer 1

如果您的options中有一个.ts对象，则可以在.html中使用以下内容：

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

如何在html模板中实现

1 个答案: