实现我的理想。

• 特定のリストの範囲を選択するのに、開始と終了のドロップダウンを使いたい

• 開始が選択されたら、終了のドロップダウンには*選択された開始以降の項目のみ

• *を表示したい

同様に、終了が選択されたら、開始のドロップダウンには選択された終了以前の項目のみを表示したい

星期列表的示例

环境

Node.js 可以被解释为一种基于 JavaScript 的开源、跨平台的运行时环境。

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

角度

"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;
  }
}

模板

在*ngFor中设置自定义管道。

<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>

模块

将自定义管道添加到declarations中。

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

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

最後

管道可能需要按照开始和结束分开。

请参考

Pipes