요일 목록 예

환경

node.js

root@user:/app/my-app# node --version
v12.7.0

Angular

"dependencies": {
    "@angular/animations": "~8.0.0",
    "@angular/common": "~8.0.0",
    "@angular/compiler": "~8.0.0",
    "@angular/core": "~8.0.0",
    "@angular/forms": "~8.0.0",
    "@angular/platform-browser": "~8.0.0",
    "@angular/platform-browser-dynamic": "~8.0.0",
    "@angular/router": "~8.0.0"
}

소스 코드

구성요소

import { Component, OnInit, Pipe, PipeTransform } from '@angular/core';

@Component({
  selector: 'app-dropdown',
  templateUrl: './dropdown.component.html',
  styleUrls: ['./dropdown.component.css']
})
export class DropdownComponent implements OnInit {
  days = ['日', '月', '火', '水', '木', '金', '土'];
  startDay: string;
  endDay: string;

  constructor() {}

  ngOnInit() {
    // 初期値の設定
    this.startDay = this.days[0];
    this.endDay = this.days[this.days.length - 1];
  }
}

맞춤형 파이프

@Pipe({ name: 'dayFilter' })
export class DayFilterPipe implements PipeTransform {
  transform(days: string[], startDay?: string, endDay?: string) {
    if (startDay) {
      const index = days.findIndex(day => day === startDay);
      return days.slice(index);
    }
    if (endDay) {
      const index = days.findIndex(day => day === endDay);
      return days.slice(0, index + 1);
    }
    return days;
  }
}

템플릿

<div>
  <label>開始</label>
  <select [(ngModel)]="startDay">
    <option
      [ngValue]="day"
      *ngFor="let day of days | dayFilter: undefined:endDay"
      >{{ day }}</option
    >
  </select>
  <label>終了</label>
  <select [(ngModel)]="endDay">
    <option
      [ngValue]="day"
      *ngFor="let day of days | dayFilter: startDay:undefined"
      >{{ day }}</option
    >
  </select>
</div>

모듈

import { DayFilterPipe } from './dayfilter.pipe';

@NgModule({
  declarations: [
    // other imports ...
    DayFilterPipe
  ]
export class AppModule {}

마지막으로

참고