Angular 6在选择选项中以年度相反的顺序显示最后12个月

Question

我将尝试在 select 选项中动态显示过去 12 个月的年份。

例如：

如果当前月份是 March 和年份 2021，我需要显示 March-2021 是前 12 个月后的第一个选项，下一个选项以相反的顺序排列。如果当前月份是April，则将第一个选项显示为“April-2021”

https://stackblitz.com/edit/angular-ivy-oxoblx?file=src%2Fapp%2Fapp.component.html

例如，请查看下面的图片

appcomponent.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular ' + VERSION.major;
  months = [{id:'01', name:'Jan'}, {id:'02', name:'Feb'},{id:'03', name:'Mar'},{id:'04', name:'Apr'},{id:'05', name:'May'},{id:'06', name:'Jun'},{id:'07', name:'Jul'},{id:'08', name:'Aug'},{id:'09', name:'Sep'},{id:'10', name:'Oct'},{id:'11', name:'Nav'},{id:'12', name:'Dec'},];

appcomponent.html

<select>
    <option *ngFor="let month of months" value="{{month.id}}">{{month.name}}</option>
</select>

<h3>Expected formate</h3>
<select>
    <option value="03">Mar-2021</option>
    <option value="02">Feb-2021</option>
    <option value="01">Jan-2021</option>
    <option value="12">Dec-2020</option>
    <option value="11">Nav-2020</option>
    <option value="10">Oct-2020</option>
    <option value="09">Sep-2020</option>
    <option value="08">Aug-2020</option>
    <option value="07">Jul-2020</option>
    <option value="06">Jun-2020</option>
    <option value="05">May-2020</option>
    <option value="04">Apr-2020</option>
</select>

Answer 1

请试试这个。 您可以轻松地从日期对象中逐一减去月份，日期对象会相应更新，如下所示

app.component.ts

import { Component, VERSION } from "@angular/core";

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

  constructor() {
    for (var i = 0; i < 12; i++) {
      var d = new Date();
      d.setMonth(d.getMonth() - i);
      var month = d.toLocaleString("default", { month: "long" });
      var year = d.getFullYear();
      var monthNo=d.getMonth();
      if(monthNo<9){
      this.dates.push( {month:"0"+(monthNo+1),date:month+"-"+year});
      }else{
      this.dates.push( {month:(monthNo+1),date:month+"-"+year});
      }
    }
  }

  name = "Angular " + VERSION.major;
  months = [
    { id: "01", name: "Jan" },
    { id: "02", name: "Feb" },
    { id: "03", name: "Mar" },
    { id: "04", name: "Apr" },
    { id: "05", name: "May" },
    { id: "06", name: "Jun" },
    { id: "07", name: "Jul" },
    { id: "08", name: "Aug" },
    { id: "09", name: "Sep" },
    { id: "10", name: "Oct" },
    { id: "11", name: "Nav" },
    { id: "12", name: "Dec" }
  ];

  selectChange(e) {
    console.log(e.target.value);
  }
}

app.component.html

<select>
    <option *ngFor="let month of months" value="{{month.id}}">{{month.name}}</option>
</select>

<h3>Expected formate</h3>
<select (change)="selectChange($event)">
    <option value="{{date.month}}" *ngFor="let date of dates;index as i;">{{date.date}}</option>

</select>