Angular实现日期，数据和更新

Angular实现日期，数据和更新
实现结果

.kijun-width {
width: 100%;
}
.add_dom_width {
width: calc((100% - 14px)/7);
text-align: center;
border:1px solid blue;
}

.cell-visibility {
visibility: hidden;
}
.cell-disp-visibility {
border: 1px solid blue;
}
``css
在这里插入代码片

```html
在这里插入代码片
```

    更新
    

        

            {{title.monyobi}}
        
        

            

                
{{number + 1}}
            
            
            
            
                生産予定数
                
            
        
    


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

在这里插入代码片
```import { DatePipe } from '@angular/common';
import { Component, ElementRef, OnInit, QueryList, ViewChildren } from '@angular/core';
import { DisplayColTitle, Yoteicontent, YoteiSeisan } from './definition';

@Component({
  selector: 'app-yotedata',
  templateUrl: './yotedata.component.html',
  styleUrls: ['./yotedata.component.scss'],
  providers: [DatePipe],
})
export class YotedataComponent implements OnInit {
  @ViewChildren('divId') divIdList?: QueryList;
  @ViewChildren('inputId') inputIdList?: QueryList;
  @ViewChildren('inputYmd') inputYmdList?: QueryList;
  @ViewChildren('inputYobi') inputYobiList?: QueryList;
  displaycolTitle: DisplayColTitle[] = [
    {monyobi:"月曜日"},
    {monyobi:"火曜日"},
    {monyobi:"水曜日"},
    {monyobi:"木曜日"},
    {monyobi:"金曜日"},
    {monyobi:"土曜日"},
    {monyobi:"日曜日"},   
  ];
  displayNum: Yoteicontent[] = [
    {deptId:'2',yobiCd:'5',ymdId:'5',hidukeymd:'20211001',accountId:'12', yotesuu:'6201'},
    {deptId:'2',yobiCd:'6',ymdId:'6',hidukeymd:'20211002',accountId:'13',yotesuu:'6202'},
    {deptId:'2',yobiCd:'7',ymdId:'7',hidukeymd:'20211003',accountId:'14',yotesuu:'6203'},
    {deptId:'2',yobiCd:'1',ymdId:'8',hidukeymd:'20211004',accountId:'22',yotesuu:'6204'},
    {deptId:'2',yobiCd:'2',ymdId:'9',hidukeymd:'20211005',accountId:'23',yotesuu:'6205'},
    {deptId:'2',yobiCd:'3',ymdId:'10',hidukeymd:'20211006',accountId:'24',yotesuu:'6206'},
    {deptId:'2',yobiCd:'4',ymdId:'11',hidukeymd:'20211007',accountId:'25',yotesuu:'6207'},
    {deptId:'2',yobiCd:'5',ymdId:'12',hidukeymd:'20211008',accountId:'26',yotesuu:'6208'},
    {deptId:'2',yobiCd:'6',ymdId:'13',hidukeymd:'20211009',accountId:'27',yotesuu:'6209'},
    {deptId:'2',yobiCd:'7',ymdId:'14',hidukeymd:'20211010',accountId:'28',yotesuu:'6210'},
    {deptId:'2',yobiCd:'1',ymdId:'15',hidukeymd:'20211011',accountId:'36',yotesuu:'6211'},
    {deptId:'2',yobiCd:'2',ymdId:'16',hidukeymd:'20211012',accountId:'37',yotesuu:'6212'},
    {deptId:'2',yobiCd:'3',ymdId:'17',hidukeymd:'20211013',accountId:'38',yotesuu:'6213'},
    {deptId:'2',yobiCd:'4',ymdId:'18',hidukeymd:'20211014',accountId:'39',yotesuu:'6214'},
    {deptId:'2',yobiCd:'5',ymdId:'19',hidukeymd:'20211015',accountId:'40',yotesuu:'6215'},
    {deptId:'2',yobiCd:'6',ymdId:'20',hidukeymd:'20211016',accountId:'41',yotesuu:'6216'},
    {deptId:'2',yobiCd:'7',ymdId:'21',hidukeymd:'20211017',accountId:'42',yotesuu:'6217'},
    {deptId:'2',yobiCd:'1',ymdId:'22',hidukeymd:'20211018',accountId:'50',yotesuu:'6218'},
    {deptId:'2',yobiCd:'2',ymdId:'23',hidukeymd:'20211019',accountId:'51',yotesuu:'6219'},
    {deptId:'2',yobiCd:'3',ymdId:'24',hidukeymd:'20211020',accountId:'52',yotesuu:'6220'},
    {deptId:'2',yobiCd:'4',ymdId:'25',hidukeymd:'20211021',accountId:'53',yotesuu:'6221'},
    {deptId:'2',yobiCd:'5',ymdId:'26',hidukeymd:'20211022',accountId:'54',yotesuu:'6222'},
    {deptId:'2',yobiCd:'6',ymdId:'27',hidukeymd:'20211023',accountId:'55',yotesuu:'6223'},
    {deptId:'2',yobiCd:'7',ymdId:'28',hidukeymd:'20211024',accountId:'56',yotesuu:'6224'},
    {deptId:'2',yobiCd:'1',ymdId:'29',hidukeymd:'20211025',accountId:'64',yotesuu:'6225'},
    {deptId:'2',yobiCd:'2',ymdId:'30',hidukeymd:'20211026',accountId:'65',yotesuu:'6226'},
    {deptId:'2',yobiCd:'3',ymdId:'31',hidukeymd:'20211027',accountId:'66',yotesuu:'6227'},
    {deptId:'2',yobiCd:'4',ymdId:'32',hidukeymd:'20211028',accountId:'67',yotesuu:'6228'},
    {deptId:'2',yobiCd:'5',ymdId:'33',hidukeymd:'20211029',accountId:'68',yotesuu:'6229'},
    {deptId:'2',yobiCd:'6',ymdId:'34',hidukeymd:'20211030',accountId:'69',yotesuu:'6230'},
    {deptId:'2',yobiCd:'7',ymdId:'35',hidukeymd:'20211031',accountId:'70',yotesuu:'6231'},
    {deptId:'2',yobiCd:'1',ymdId:'36',hidukeymd:'20211101',accountId:'78',yotesuu:'6241'},  
    {deptId:'2',yobiCd:'2',ymdId:'37',hidukeymd:'20211102',accountId:'79',yotesuu:'6242'},
    {deptId:'2',yobiCd:'3',ymdId:'38',hidukeymd:'20211103',accountId:'80',yotesuu:'6243'},
    {deptId:'2',yobiCd:'4',ymdId:'39',hidukeymd:'20211104',accountId:'81',yotesuu:'6244'},
    {deptId:'2',yobiCd:'5',ymdId:'40',hidukeymd:'20211105',accountId:'82',yotesuu:'6245'},
    {deptId:'2',yobiCd:'6',ymdId:'41',hidukeymd:'20211106',accountId:'83',yotesuu:'6246'},
    {deptId:'2',yobiCd:'7',ymdId:'42',hidukeymd:'20211107',accountId:'84',yotesuu:'6247'},
    {deptId:'2',yobiCd:'1',ymdId:'43',hidukeymd:'20211108',accountId:'92',yotesuu:'6248'},
    {deptId:'2',yobiCd:'2',ymdId:'44',hidukeymd:'20211109',accountId:'93',yotesuu:'6249'},
    {deptId:'2',yobiCd:'3',ymdId:'45',hidukeymd:'20211110',accountId:'94',yotesuu:'6250'},
    {deptId:'2',yobiCd:'4',ymdId:'46',hidukeymd:'20211111',accountId:'95',yotesuu:'6251'},
    {deptId:'2',yobiCd:'5',ymdId:'47',hidukeymd:'20211112',accountId:'96',yotesuu:'6252'},
    {deptId:'2',yobiCd:'6',ymdId:'48',hidukeymd:'20211113',accountId:'97',yotesuu:'6253'},
    {deptId:'2',yobiCd:'7',ymdId:'49',hidukeymd:'20211114',accountId:'98',yotesuu:'6254'},
    {deptId:'2',yobiCd:'1',ymdId:'50',hidukeymd:'20211115',accountId:'106',yotesuu:'6255'},
    {deptId:'2',yobiCd:'2',ymdId:'51',hidukeymd:'20211116',accountId:'107',yotesuu:'6256'},
    {deptId:'2',yobiCd:'3',ymdId:'52',hidukeymd:'20211117',accountId:'108',yotesuu:'6257'},
    {deptId:'2',yobiCd:'4',ymdId:'53',hidukeymd:'20211118',accountId:'109',yotesuu:'6258'},
    {deptId:'2',yobiCd:'5',ymdId:'54',hidukeymd:'20211119',accountId:'110',yotesuu:'6259'},
    {deptId:'2',yobiCd:'6',ymdId:'55',hidukeymd:'20211120',accountId:'111',yotesuu:'6260'},
    {deptId:'2',yobiCd:'7',ymdId:'56',hidukeymd:'20211121',accountId:'112',yotesuu:'6261'},
    {deptId:'2',yobiCd:'1',ymdId:'57',hidukeymd:'20211122',accountId:'120',yotesuu:'6262'},
    {deptId:'2',yobiCd:'2',ymdId:'58',hidukeymd:'20211123',accountId:'121',yotesuu:'6263'},
    {deptId:'2',yobiCd:'3',ymdId:'59',hidukeymd:'20211124',accountId:'122',yotesuu:'6264'},
    {deptId:'2',yobiCd:'4',ymdId:'60',hidukeymd:'20211125',accountId:'123',yotesuu:'6265'},
    {deptId:'2',yobiCd:'5',ymdId:'61',hidukeymd:'20211126',accountId:'124',yotesuu:'6266'},
    {deptId:'2',yobiCd:'6',ymdId:'62',hidukeymd:'20211127',accountId:'125',yotesuu:'6267'},
    {deptId:'2',yobiCd:'7',ymdId:'63',hidukeymd:'20211128',accountId:'126',yotesuu:'6268'},
    {deptId:'2',yobiCd:'1',ymdId:'64',hidukeymd:'20211129',accountId:'134',yotesuu:'6269'},
    {deptId:'2',yobiCd:'2',ymdId:'65',hidukeymd:'20211130',accountId:'135',yotesuu:'6270'},  
  ];
  submitData: Yoteicontent = {
    deptId: '',
    yobiCd: '',
    ymdId: '',
    hidukeymd: '',
    accountId:'',
    yotesuu:'',
  };
  items: number = 70;
  numbers?: number[];
  seisanYoteiSuu?: string;
  firstYobi!: number;
  lastYobi!: number;
  constructor(private datePipe: DatePipe) { 
    this.numbers = Array(this.items).fill(0).map((x,i) => i);
  }

  ngOnInit(): void {
  }
  ngAfterViewInit(): void {
    this.firstYobi = Number(this.displayNum[0].yobiCd) - 1;
    this.lastYobi = Number(this.displayNum.length) + this.firstYobi - 1;
    for(var i=0; i< this.displayNum.length; i++) {
      let yobi = this.displayNum[i].ymdId;
      let ele = this.divIdList?.get(Number(yobi)-1)?.nativeElement;
      let elef = this.inputIdList?.get(Number(yobi)-1)?.nativeElement;
      let ymdEle = this.inputYmdList?.get(Number(yobi)-1)?.nativeElement;
      let yobiElef = this.inputYobiList?.get(Number(yobi)-1)?.nativeElement;
      var pattern = /(\d{4})(\d{2})(\d{2})/;
      let date = new Date(this.displayNum[i].hidukeymd.replace(pattern, '$1-$2-$3'));
      ele.innerText=this.datePipe.transform(date,'M月d日');
      elef.value = this.displayNum[i].yotesuu;
      ymdEle.value = this.displayNum[i].yobiCd;
      yobiElef.value = this.displayNum[i].hidukeymd;
      
    }
  }

  onSubmit() {
    let submitDataList: YoteiSeisan[] = new Array();
    for(var i=0; i< this.displayNum.length; i++) {
      let yobi = this.displayNum[i].ymdId;
      let elef = this.inputIdList?.get(Number(yobi)-1)?.nativeElement;
      let ymdEle = this.inputYmdList?.get(Number(yobi)-1)?.nativeElement;
      let yobiElef = this.inputYobiList?.get(Number(yobi)-1)?.nativeElement;
      let yobiCd = ymdEle.value;
      let hidukeymd = yobiElef.value;
      let yotesuu = elef.value;
      let deptId = this.displayNum[i].deptId;
      var yoteiSeisan = new YoteiSeisan(
        deptId,
        yobiCd,
        hidukeymd,
        yotesuu
      )

      submitDataList?.push(yoteiSeisan);  
    }
    console.log(submitDataList);
  }
}

```typescript
在这里插入代码片
export type DisplayColTitle = {
    monyobi: string;
}
export type Yoteicontent = {
    deptId: string;
    yobiCd: string;
    ymdId: string;
    hidukeymd: string;
    accountId: string;
    yotesuu: string;
}

export class YoteiSeisan {
    deptId: string;
    yobiCd: string;
    hidukeymd: string;
    yotesuu: string;

    constructor(
        deptId: string,
        yobiCd: string,
        hidukeymd: string,
        yotesuu: string) {
        this.deptId = deptId;
        this.yobiCd = yobiCd;
        this.hidukeymd = hidukeymd;
        this.yotesuu = yotesuu;
      }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181

实现