Angular 4+的iOS样式数据选择器

Angular 4+的iOS样式数据选择器
插件名称 ng-data-picker
发布时间 2020年7月21日
插件作者 hiyali

适用于AngularJS 4+的iOS样式数据选择器,使您更容易在触摸屏设备上选择一些数据,例如时间,城市,性别,数字,产品等等。

安装:

# Yarn
$ yarn add ng-data-picker

# NPM
$ npm install ng-data-picker --save

用法:

导入。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { DataPickerModule } from './data-picker/data-picker.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    DataPickerModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

设置数据。

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';

  data = [
    {
      list: ['1', '2', '3', '4', '5', '6', '7', '8', '9'],
      currentIndex: 4
    }
  ]

  change (gIndex, iIndex) {
    console.log(gIndex, iIndex)
  }
}

编码模板。

<ng-data-picker [data]="data" (change)="change"></ng-data-picker>