Angular 6显示过去12个月，在选择选项中显示年份倒序

问题描述

我将尝试在 select 选项中动态显示年份的最后12个月.

例如:

appcomponent.ts

 从'@ angular/core'导入{Component，VERSION}；@零件({选择器:"my-app"，templateUrl:"./app.component.html"，styleUrls:['./app.component.css']})导出类AppComponent {名称='角度'+ VERSION.major;月= [{{id:'01'，名称:'Jan'}，{id:'02'，名称:'Feb'}，{id:'03'，名称:'Mar'}，{id:'04'，名称:'Apr'}，{id:'05'，名称:'May'}，{id:'06'，名称:'Jun'}，{id:'07'，名称:'Jul'}，{id:'08'，名称:'Aug'}，{id:'09'，名称:'Sep'}，{id:'10'，名称:'Oct'}，{id:'11'，名称:'Nav'}，{id:'12'，名称:'Dec'}，]； 

appcomponent.html

 < select>< option * ngFor =让月份月份"value ="{{month.id}}"> {{month.name}}</option></select>< h3>预期甲酸盐//h3><选择>< option value ="03"> Mar-2021</option><选项值="02">-2021年2月</option><选项值="01"> -2021年1月</option>< option value ="12"> 2020年12月</option>< option value ="11"> Nav-2020</option>< option value ="10"> 2020年10月</option>< option value ="09"> 2020年9月</option>< option value ="08"> 2020年8月</option>< option value ="07"> 2020年7月</option>< option value ="06"> 2020年6月</option>< option value ="05"> 2020年5月</option>< option value ="04"> 2020年4月</option></select> 

解决方案

请尝试此操作.您可以轻松地从日期对象中一一减去月份，日期对象也会相应地更新，如下所示

app.component.ts

 从"@ angular/core"导入{Component，VERSION}；@零件({选择器:"my-app"，templateUrl:"./app.component.html"，styleUrls:["./app.component.css"]})导出类AppComponent {日期= []；Constructor(){对于(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})；}别的{this.dates.push({month:(monthNo + 1)，date:month +-" + year});}}}名称=角"+ VERSION.major;个月= [{id:"01"，名称:"Jan"；}，{id:"02"，名称:"Feb"}，{id:"03"，名称:"Mar"}，{id:"04"，名称:"Apr"}，{id:"05"，名称:"May"}，{id:"06"，名称:"Jun"}，{id:"07"，名称:"Jul"}，{id:"08"，名称:"Aug"}，{id:"09"；名称:"Sep"}，{id:"10"，名称:"Oct"}，{id:"11"，名称:"Nav"；}，{id:"12"，名称:"Dec"}];selectChange(e){console.log(e.target.value);}} 

app.component.html

 < select>< option * ngFor =让月份月份"value ="{{month.id}}"> {{month.name}}</option></select>< h3>预期甲酸盐//h3>< select(change)="selectChange($ event)">< option value =" {{date.month}}"* ngFor =让日期的日期；索引为i；"> {{date.date}}</option></select> 

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

Eg:

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个月，在选择选项中显示年份倒序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！