ionicでログインしたユーザーのidを取得したい

私は現在こちらの記事を参考にionicでログインシステムを作り、こちらの記事で生成したQRコードの中身を以下のコードでログイン中のユーザーのidに変更しています。

typescript
1import { Component } from '@angular/core';
2import {BarcodeScannerOptions, BarcodeScanner} from "@ionic-native/barcode-scanner/ngx";
3import { MenuController } from '@ionic/angular';
4import { User } from 'src/app/models/user';
5import { AuthService } from 'src/app/services/auth.service';
6
7@Component({
8  selector: 'app-tab4',
9  templateUrl: 'tab4.page.html',
10  styleUrls: ['tab4.page.scss']
11})
12export class Tab4Page {
13  user: User;
14  encodeData: any;
15  scannedData: {};
16  barcodeScannerOptions: BarcodeScannerOptions;
17
18  constructor(private barcodeScanner: BarcodeScanner, private menu: MenuController, private authService: AuthService) {
19    this.menu.enable(true);
20    this.authService.user().subscribe(
21      user => {
22        this.user = user;
23      }
24    );
25    this.encodeData = this.user["id"];
26    //Options
27    this.barcodeScannerOptions = {
28      showTorchButton: true,
29      showFlipCameraButton: true
30    };
31  }
32
33  ionViewWillEnter() {
34    this.authService.user().subscribe(
35      user => {
36        this.user = user;
37      }
38    );
39  }
40
41  scanCode() {
42    this.barcodeScanner
43      .scan()
44      .then(barcodeData => {
45        alert("Barcode data " + JSON.stringify(barcodeData));
46        this.scannedData = barcodeData;
47      })
48      .catch(err => {
49        console.log("Error", err);
50      });
51  }
52
53  encodedText() {
54    this.barcodeScanner
55      .encode(this.barcodeScanner.Encode.TEXT_TYPE, this.encodeData)
56      .then(
57        encodedData => {
58          console.log(encodedData);
59          this.encodeData = encodedData;
60        },
61        err => {
62          console.log("Error occured : " + err);
63        }
64      );
65  }
66}
67

しかし、以下のエラーが表示され、QRコードを表示することが出来ません。

error
1ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'id' of undefined
2TypeError: Cannot read property 'id' of undefined
3    at new Tab4Page (tab4.page.ts:25)
4    at createClass (core.js:22154)
5    at createDirectiveInstance (core.js:22029)
6    at createViewNodes (core.js:23255)
7    at createRootView (core.js:23169)
8    at callWithDebugContext (core.js:24177)
9    at Object.debugCreateRootView [as createRootView] (core.js:23687)
10    at ComponentFactory_.push../node_modules/@angular/core/fesm5/core.js.ComponentFactory_.create (core.js:21508)
11    at ComponentFactoryBoundToModule.push../node_modules/@angular/core/fesm5/core.js.ComponentFactoryBoundToModule.create (core.js:9935)
12    at ViewContainerRef_.push../node_modules/@angular/core/fesm5/core.js.ViewContainerRef_.createComponent (core.js:21619)
13    at resolvePromise (zone.js:831)
14    at resolvePromise (zone.js:788)
15    at zone.js:892
16    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
17    at Object.onInvokeTask (core.js:17290)
18    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
19    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
20    at drainMicroTaskQueue (zone.js:601)
21    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:502)
22    at invokeTask (zone.js:1744)

正常に表示させるには何処を変更すればいいのでしょうか。

行動規範の内容に同意します

回答1件

ベストアンサー

subscribeに渡すオブザーバー内でユーザーIDを受けるようにしてみてください。

js
1constructor(private barcodeScanner: BarcodeScanner, private menu: MenuController, private authService: AuthService) {
2  this.menu.enable(true);
3  this.authService.user().subscribe(
4    user => {
5      this.user = user;
6      this.encodeData = this.user["id"];
7    }
8  );
9  //Options
10  this.barcodeScannerOptions = {
11     showTorchButton: true,
12    showFlipCameraButton: true
13  };
14}
15
16ionViewWillEnter() {
17  this.authService.user().subscribe(
18    user => {
19      this.user = user;
20      this.encodeData = this.user["id"];
21    }
22  );
23}