Angular 6 在选择选项中显示过去 12 个月的年份倒序 [英] Angular 6 show last 12 months with year reverse order in select option

问题描述

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

例如:

<块引用>

如果当前月份是 March 和年份 2021，我需要显示 March-2021 是过去 12 个月之后的第一个选项下一个选项以相反的顺序.如果当前月份是 April，则将第一个选项显示为April-2021"

appcomponent.ts

import { Component, VERSION } from '@angular/core';@成分({选择器:'我的应用'，templateUrl: './app.component.html',styleUrls: ['./app.component.css']})导出类 AppComponent {名称 = '角度' + VERSION.major;月 = [{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

<option *ngFor=让月数"value={{month.id}}">{{month.name}}</选择><h3>预期甲酸盐</h3><选择><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></选择>
解决方案
请试试这个.您可以轻松地从日期对象中一一减去月份，日期对象会相应地更新，如下所示
app.component.ts
import { Component, VERSION } from "@angular/core";@成分({选择器:我的应用程序"，templateUrl: "./app.component.html",styleUrls: [./app.component.css"]})导出类 AppComponent {日期 = [];构造函数(){for (var i = 0; i <12; i++) {var d = 新日期();d.setMonth(d.getMonth() - i);var month = d.toLocaleString("default", { month: "long" });var 年 = d.getFullYear();var monthNo=d.getMonth();如果(月号<9){this.dates.push( {month:"0"+(monthNo+1),date:month+"-"+year});}别的{this.dates.push( {month:(monthNo+1),date:month+"-"+year});}}}名称=角度"+ VERSION.major;月 = [{ id:01"，姓名:Jan"；},{ id: 02", name: Feb";},{ id:03"，名称:Mar"；},{ id: 04", name: Apr";},{ id: 05", name: May";},{ id: "06", name: "Jun";},{ id:07"，名称:Jul"；},{ id: 08", name: Aug";},{ id:09"，名称:Sep"；},{ id:10"，名称:Oct"；},{ ID:11"，名称:导航"；},{ id:12"，名称:Dec"；}];选择更改(e){console.log(e.target.value);}}
app.component.html
<option *ngFor=让月数"value={{month.id}}">{{month.name}}</选择><h3>预期甲酸盐</h3><select(change)=selectChange($event)"><option value="{{date.month}}";*ngFor=让日期的日期；索引为 i；">{{date.date}}</option></选择>

I will try to show last 12 months with year in select option dynamically.

Eg:

If current month is March and year 2021, I need to show March-2021 is first option after last previous 12 months next options in reverse order. If current month is April, show first option as 'April-2021'

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

Please check bellow image for example

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>

解决方案

Please try this. You can easily subtract months from date object one by one and the date object gets updated accordingly as seen below

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>

这篇关于Angular 6 在选择选项中显示过去 12 个月的年份倒序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！