質問編集履歴

2

たぐを追加

2019/08/27 03:14

投稿

Gento
Gento

スコア77

test CHANGED
File without changes
test CHANGED
File without changes

1

空欄のエラーメッセージを削除

2019/08/27 03:14

投稿

Gento
Gento

スコア77

test CHANGED
@@ -1 +1 @@
1
- サービスを使ってデータを取得したい。
1
+ Angularのサービスを使って、イベントデータをFirebaseから取得したい。
test CHANGED
@@ -34,366 +34,362 @@
34
34
 
35
35
 
36
36
 
37
+
38
+
39
+
40
+
41
+ ### home.page.ts
42
+
43
+
44
+
45
+ ```ここに言語名を入力
46
+
47
+ import { AuthService } from './../auth/auth.service';
48
+
49
+ import { AngularFirestore } from '@angular/fire/firestore';
50
+
51
+ import { HomeService, DayEvent } from './home.service';
52
+
53
+ import { Component, OnInit } from '@angular/core';
54
+
55
+ import { NavController } from '@ionic/angular';
56
+
57
+ import { Router } from '@angular/router';
58
+
59
+ import { EventData } from './home.model';
60
+
61
+ import { Observable } from 'rxjs';
62
+
63
+
64
+
65
+ @Component({
66
+
67
+ selector: 'app-home',
68
+
69
+ templateUrl: 'home.page.html',
70
+
71
+ styleUrls: ['home.page.scss'],
72
+
73
+ })
74
+
75
+ export class HomePage implements OnInit {
76
+
77
+ eventSource = [];
78
+
79
+ viewTitle;
80
+
81
+ calendar = {
82
+
83
+ mode: 'month',
84
+
85
+ currentDate: new Date(),
86
+
87
+ locale: 'ja-JP'
88
+
89
+ };
90
+
91
+
92
+
93
+ //private events: Observable<DayEvent[]>;
94
+
95
+
96
+
97
+ constructor(
98
+
99
+ private navCtrl: NavController,
100
+
101
+ private router: Router,
102
+
103
+ private homeService: HomeService,
104
+
105
+ private db: AngularFirestore
106
+
107
+ ) {
108
+
109
+ this.db.collection(`events`).snapshotChanges().subscribe(colSnap => {
110
+
111
+ this.eventSource = [];
112
+
113
+ colSnap.forEach(snap => {
114
+
115
+ const event: any = snap.payload.doc.data();
116
+
117
+ event.id = snap.payload.doc.id;
118
+
119
+ event.startTime = event.startTime.toDate();
120
+
121
+ event.endTime = event.endTime.toDate();
122
+
123
+ this.eventSource.push(event);
124
+
125
+ });
126
+
127
+ });
128
+
129
+ }
130
+
131
+
132
+
133
+ //getEventsはhome.service.tsから呼ばれた
134
+
135
+ ngOnInit() {
136
+
137
+ // this.events = this.homeService.getEvents();
138
+
139
+ }
140
+
141
+
142
+
143
+ onViewTitleChanged(title) {
144
+
145
+ this.viewTitle = title;
146
+
147
+ }
148
+
149
+
150
+
151
+
152
+
153
+
154
+
155
+ onEventSelected(event) {
156
+
157
+ console.log('Event selected:' + event.startTime + '-' + event.endTime + ',' + event.title);
158
+
159
+ }
160
+
161
+
162
+
163
+ onTimeSelected(ev) {
164
+
165
+ const selected = new Date(ev.selectedTime);
166
+
167
+ this.homeService.selectedDate = selected;
168
+
169
+ }
170
+
171
+
172
+
173
+ reloadSource(ev) {
174
+
175
+ console.log('range changed: startTime: ' + ev.startTime + ', endTime: ' + ev.endTime);
176
+
177
+ }
178
+
179
+
180
+
181
+
182
+
183
+ today() {
184
+
185
+ this.calendar.currentDate = new Date();
186
+
187
+ }
188
+
189
+
190
+
191
+ dayPage() {
192
+
193
+ this.router.navigateByUrl('/day');
194
+
195
+ }
196
+
197
+
198
+
199
+ }
200
+
201
+
202
+
37
203
  ```
38
204
 
205
+ ### home.service.ts
206
+
39
- エラーメッセージ
207
+ ```ここに言語を入力
208
+
209
+ import { Injectable } from '@angular/core';
210
+
211
+ import { Observable } from 'rxjs';
212
+
213
+ import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/firestore';
214
+
215
+ import { map, take } from 'rxjs/operators';
216
+
217
+
218
+
219
+ export interface DayEvent {
220
+
221
+ id?: string;
222
+
223
+ title: string;
224
+
225
+ startTime: Date;
226
+
227
+ endTime: Date;
228
+
229
+ allDay: boolean;
230
+
231
+ }
232
+
233
+
234
+
235
+ @Injectable({
236
+
237
+ providedIn: 'root'
238
+
239
+ })
240
+
241
+ export class HomeService {
242
+
243
+ private dayCollection: AngularFirestoreCollection<DayEvent>;
244
+
245
+ private dayEvents: Observable<DayEvent[]>;
246
+
247
+ private colEvents;
248
+
249
+
250
+
251
+
252
+
253
+ eventSource = [];
254
+
255
+ selectedDate = new Date();
256
+
257
+
258
+
259
+ constructor(
260
+
261
+ private afs: AngularFirestore
262
+
263
+ )
264
+
265
+ {
266
+
267
+ this.dayCollection = this.afs.collection(`events`);
268
+
269
+ this.colEvents = this.dayCollection.snapshotChanges().subscribe(colSnap => {
270
+
271
+ this.eventSource = [];
272
+
273
+ colSnap.forEach(snap => {
274
+
275
+ const event: any = snap.payload.doc.data();
276
+
277
+ event.id = snap.payload.doc.id;
278
+
279
+ event.startTime = event.startTime.toDate();
280
+
281
+ event.endTime = event.endTime.toDate();
282
+
283
+ //イベントはログに出るが、画面に反映されない。
284
+
285
+ console.log(event);
286
+
287
+ return this.eventSource.push(event);
288
+
289
+ });
290
+
291
+ });
292
+
293
+
294
+
295
+
296
+
297
+
298
+
299
+
300
+
301
+
302
+
303
+ }
304
+
305
+
306
+
307
+ //これをhome.page.tsで呼ぶ
308
+
309
+ getEvents(): Observable<DayEvent[]> {
310
+
311
+ return this.colEvents;
312
+
313
+ }
314
+
315
+
316
+
317
+
318
+
319
+ addNewEvent() {
320
+
321
+ const start = this.selectedDate;
322
+
323
+ const end = this.selectedDate;
324
+
325
+ end.setMinutes(end.getMinutes() + 60);
326
+
327
+
328
+
329
+ const event = {
330
+
331
+ title: 'Event #' + start.getMinutes(),
332
+
333
+ startTime: start,
334
+
335
+ endTime: end,
336
+
337
+ allDay: true
338
+
339
+ };
340
+
341
+ console.log('イベント登録' + start);
342
+
343
+ //this.db.collection(`users/${this.authService.userId}/events`);
344
+
345
+ return this.afs.collection(`events`).add(event);
346
+
347
+ }
348
+
349
+
350
+
351
+ onEventSelected(event) {
352
+
353
+ return console.log('イベント選ばれた:' + event.startTime + '-' + event.endTime + ',' + event.title);
354
+
355
+ }
356
+
357
+
358
+
359
+ onTimeSelected(ev) {
360
+
361
+ return console.log(ev.selectedTime + ', hasEvents: ' +
362
+
363
+ (ev.events !== undefined && ev.events.length !== 0) + ', disabled: ' + ev.disabled);
364
+
365
+ }
366
+
367
+
368
+
369
+
370
+
371
+ reloadSource(ev) {
372
+
373
+ return console.log('range changed: startTime: ' + ev.startTime + ', endTime: ' + ev.endTime);
374
+
375
+ }
376
+
377
+
378
+
379
+
380
+
381
+
382
+
383
+
384
+
385
+
386
+
387
+ }
388
+
389
+
40
390
 
41
391
  ```
42
392
 
43
393
 
44
394
 
45
- ### home.page.ts
46
-
47
-
48
-
49
- ```ここに言語名を入力
50
-
51
- import { AuthService } from './../auth/auth.service';
52
-
53
- import { AngularFirestore } from '@angular/fire/firestore';
54
-
55
- import { HomeService, DayEvent } from './home.service';
56
-
57
- import { Component, OnInit } from '@angular/core';
58
-
59
- import { NavController } from '@ionic/angular';
60
-
61
- import { Router } from '@angular/router';
62
-
63
- import { EventData } from './home.model';
64
-
65
- import { Observable } from 'rxjs';
66
-
67
-
68
-
69
- @Component({
70
-
71
- selector: 'app-home',
72
-
73
- templateUrl: 'home.page.html',
74
-
75
- styleUrls: ['home.page.scss'],
76
-
77
- })
78
-
79
- export class HomePage implements OnInit {
80
-
81
- eventSource = [];
82
-
83
- viewTitle;
84
-
85
- calendar = {
86
-
87
- mode: 'month',
88
-
89
- currentDate: new Date(),
90
-
91
- locale: 'ja-JP'
92
-
93
- };
94
-
95
-
96
-
97
- //private events: Observable<DayEvent[]>;
98
-
99
-
100
-
101
- constructor(
102
-
103
- private navCtrl: NavController,
104
-
105
- private router: Router,
106
-
107
- private homeService: HomeService,
108
-
109
- private db: AngularFirestore
110
-
111
- ) {
112
-
113
- this.db.collection(`events`).snapshotChanges().subscribe(colSnap => {
114
-
115
- this.eventSource = [];
116
-
117
- colSnap.forEach(snap => {
118
-
119
- const event: any = snap.payload.doc.data();
120
-
121
- event.id = snap.payload.doc.id;
122
-
123
- event.startTime = event.startTime.toDate();
124
-
125
- event.endTime = event.endTime.toDate();
126
-
127
- this.eventSource.push(event);
128
-
129
- });
130
-
131
- });
132
-
133
- }
134
-
135
-
136
-
137
- //getEventsはhome.service.tsから呼ばれた
138
-
139
- ngOnInit() {
140
-
141
- // this.events = this.homeService.getEvents();
142
-
143
- }
144
-
145
-
146
-
147
- onViewTitleChanged(title) {
148
-
149
- this.viewTitle = title;
150
-
151
- }
152
-
153
-
154
-
155
-
156
-
157
-
158
-
159
- onEventSelected(event) {
160
-
161
- console.log('Event selected:' + event.startTime + '-' + event.endTime + ',' + event.title);
162
-
163
- }
164
-
165
-
166
-
167
- onTimeSelected(ev) {
168
-
169
- const selected = new Date(ev.selectedTime);
170
-
171
- this.homeService.selectedDate = selected;
172
-
173
- }
174
-
175
-
176
-
177
- reloadSource(ev) {
178
-
179
- console.log('range changed: startTime: ' + ev.startTime + ', endTime: ' + ev.endTime);
180
-
181
- }
182
-
183
-
184
-
185
-
186
-
187
- today() {
188
-
189
- this.calendar.currentDate = new Date();
190
-
191
- }
192
-
193
-
194
-
195
- dayPage() {
196
-
197
- this.router.navigateByUrl('/day');
198
-
199
- }
200
-
201
-
202
-
203
- }
204
-
205
-
206
-
207
- ```
208
-
209
- ### home.service.ts
210
-
211
- ```ここに言語を入力
212
-
213
- import { Injectable } from '@angular/core';
214
-
215
- import { Observable } from 'rxjs';
216
-
217
- import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/firestore';
218
-
219
- import { map, take } from 'rxjs/operators';
220
-
221
-
222
-
223
- export interface DayEvent {
224
-
225
- id?: string;
226
-
227
- title: string;
228
-
229
- startTime: Date;
230
-
231
- endTime: Date;
232
-
233
- allDay: boolean;
234
-
235
- }
236
-
237
-
238
-
239
- @Injectable({
240
-
241
- providedIn: 'root'
242
-
243
- })
244
-
245
- export class HomeService {
246
-
247
- private dayCollection: AngularFirestoreCollection<DayEvent>;
248
-
249
- private dayEvents: Observable<DayEvent[]>;
250
-
251
- private colEvents;
252
-
253
-
254
-
255
-
256
-
257
- eventSource = [];
258
-
259
- selectedDate = new Date();
260
-
261
-
262
-
263
- constructor(
264
-
265
- private afs: AngularFirestore
266
-
267
- )
268
-
269
- {
270
-
271
- this.dayCollection = this.afs.collection(`events`);
272
-
273
- this.colEvents = this.dayCollection.snapshotChanges().subscribe(colSnap => {
274
-
275
- this.eventSource = [];
276
-
277
- colSnap.forEach(snap => {
278
-
279
- const event: any = snap.payload.doc.data();
280
-
281
- event.id = snap.payload.doc.id;
282
-
283
- event.startTime = event.startTime.toDate();
284
-
285
- event.endTime = event.endTime.toDate();
286
-
287
- //イベントはログに出るが、画面に反映されない。
288
-
289
- console.log(event);
290
-
291
- return this.eventSource.push(event);
292
-
293
- });
294
-
295
- });
296
-
297
-
298
-
299
-
300
-
301
-
302
-
303
-
304
-
305
-
306
-
307
- }
308
-
309
-
310
-
311
- //これをhome.page.tsで呼ぶ
312
-
313
- getEvents(): Observable<DayEvent[]> {
314
-
315
- return this.colEvents;
316
-
317
- }
318
-
319
-
320
-
321
-
322
-
323
- addNewEvent() {
324
-
325
- const start = this.selectedDate;
326
-
327
- const end = this.selectedDate;
328
-
329
- end.setMinutes(end.getMinutes() + 60);
330
-
331
-
332
-
333
- const event = {
334
-
335
- title: 'Event #' + start.getMinutes(),
336
-
337
- startTime: start,
338
-
339
- endTime: end,
340
-
341
- allDay: true
342
-
343
- };
344
-
345
- console.log('イベント登録' + start);
346
-
347
- //this.db.collection(`users/${this.authService.userId}/events`);
348
-
349
- return this.afs.collection(`events`).add(event);
350
-
351
- }
352
-
353
-
354
-
355
- onEventSelected(event) {
356
-
357
- return console.log('イベント選ばれた:' + event.startTime + '-' + event.endTime + ',' + event.title);
358
-
359
- }
360
-
361
-
362
-
363
- onTimeSelected(ev) {
364
-
365
- return console.log(ev.selectedTime + ', hasEvents: ' +
366
-
367
- (ev.events !== undefined && ev.events.length !== 0) + ', disabled: ' + ev.disabled);
368
-
369
- }
370
-
371
-
372
-
373
-
374
-
375
- reloadSource(ev) {
376
-
377
- return console.log('range changed: startTime: ' + ev.startTime + ', endTime: ' + ev.endTime);
378
-
379
- }
380
-
381
-
382
-
383
-
384
-
385
-
386
-
387
-
388
-
389
-
390
-
391
- }
392
-
393
-
394
-
395
- ```
396
-
397
-
398
-
399
395
  home.service.tsには、どのようにコードを書けば良いでしょうか?