私はIonicでこちらの記事を参考にログインシステムを実装しました。
そこに新たにポイントシステムを実装する必要が出てきた為、以下のコードを記入しました。
typescript
1import { HttpClient, HttpHeaders } from '@angular/common/http'; 2import { Injectable } from '@angular/core'; 3import { tap } from 'rxjs/operators'; 4import { NativeStorage } from '@ionic-native/native-storage/ngx'; 5import { EnvService } from './env.service'; 6import { User } from '../models/user'; 7 8@Injectable({ 9 providedIn: 'root' 10}) 11export class AuthService { 12 isLoggedIn = false; 13 token:any; 14 15 constructor( 16 private http: HttpClient, 17 private storage: NativeStorage, 18 private env: EnvService, 19 ) { } 20 21 login(email: String, password: String) { 22 return this.http.post(this.env.API_URL + 'auth/login', 23 {email: email, password: password} 24 ).pipe( 25 tap(token => { 26 this.storage.setItem('token', token) 27 .then( 28 () => { 29 console.log('Token Stored'); 30 }, 31 error => console.error('Error storing item', error) 32 ); 33 this.token = token; 34 this.isLoggedIn = true; 35 return token; 36 }), 37 ); 38 } 39 40 logout() { 41 const headers = new HttpHeaders({ 42 'Authorization': this.token["token_type"]+" "+this.token["access_token"] 43 }); 44 return this.http.get(this.env.API_URL + 'auth/logout', { headers: headers }) 45 .pipe( 46 tap(data => { 47 this.storage.remove("token"); 48 this.isLoggedIn = false; 49 delete this.token; 50 return data; 51 }) 52 ) 53 } 54 55 user() { 56 const headers = new HttpHeaders({ 57 'Authorization': this.token["token_type"]+" "+this.token["access_token"] 58 }); 59 return this.http.get<User>(this.env.API_URL + 'auth/user', { headers: headers }) 60 .pipe( 61 tap(user => { 62 return user; 63 }) 64 ) 65 } 66 67 point() { 68 const headers = new HttpHeaders({ 69 'Authorization': this.token["token_type"]+" "+this.token["access_token"] 70 }); 71 return this.http.get(this.env.API_URL + 'auth/point', { headers: headers }) 72 .pipe( 73 tap(point => { 74 return point; 75 }) 76 ) 77 } 78 79 getToken() { 80 return this.storage.getItem('token').then( 81 data => { 82 this.token = data; 83 if(this.token != null) { 84 this.isLoggedIn=true; 85 } else { 86 this.isLoggedIn=false; 87 } 88 }, 89 error => { 90 this.token = null; 91 this.isLoggedIn=false; 92 } 93 ); 94 } 95} 96
表示ページのコードは以下になります。
typescript
1import { Component, OnInit } from '@angular/core'; 2import { MenuController } from '@ionic/angular'; 3import { AuthService } from 'src/app/services/auth.service'; 4import { User } from 'src/app/models/user'; 5 6@Component({ 7 selector: 'app-tab1', 8 templateUrl: 'tab1.page.html', 9 styleUrls: ['tab1.page.scss'] 10}) 11export class Tab1Page implements OnInit { 12 13 user: User; 14 15 constructor(private menu: MenuController, private authService: AuthService) {} 16 17 ngOnInit() { 18 } 19 ionViewWillEnter() { 20 this.authService.user().subscribe( 21 user => { 22 this.user = user; 23 } 24 ); 25 this.authService.point().subscribe( 26 point => { 27 this.point = point; 28 } 29 ); 30 } 31}
しかし、実行すると以下のエラーが表示されるのですが、どうすれば解決できるのでしょうか。
error
1[ng] ERROR in src/app/tab1/tab1.page.ts(27,14): error TS2339: Property 'point' does not exist on type 'Tab1Page'.
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。