无法重复的Ionic5 FavoriteService

如何解决无法重复的Ionic5 FavoriteService

我一直在遵循创建Ionic5 StarWars应用程序的教程，尽管该应用程序已接近完成，但在理解如何获得“电影”，“人物”，“行星”等所有标签上的“收藏夹”星标按钮时遇到了麻烦。我对Ionic5不太熟悉，并试图弄清楚如何在所有选项卡上添加收藏夹按钮。做了大量的研究，花了很多时间试图使它生效。

到目前为止，仅存在“收藏”电影的功能，而没有人或星球的功能。当我尝试复制电影的代码以将其扩展到人类和地球时，我无法并得到错误提示，即不允许重复。

真的很感激这方面的任何帮助，因为我想让所有人-电影，人物和星球都成为最受欢迎的电影。感谢您的帮助。

favourite.service.ts中的代码如下：-

import { Injectable } from '@angular/core';
import { Storage } from '@ionic/storage';

const STORAGE_KEY  = 'favoriteFilms';

@Injectable({
  providedIn: 'root'
})
export class FavoriteService {

  constructor(private storage: Storage) {
  }

  getAllFavoriteFilms() {
    return this.storage.get(STORAGE_KEY);
  }

 
  isFavorite(filmId) {
    return this.getAllFavoriteFilms().then(result => {
      return result && result.indexOf(filmId) !== -1;
    });
  }

   favoriteFilm(filmId) {
    return this.getAllFavoriteFilms().then(result => {
      result = result || [];
      result.push(filmId);
      return this.storage.set(STORAGE_KEY,result);
    });
  }

  unfavoriteFilm(filmId) {
    return this.getAllFavoriteFilms().then(result => {
      if (result) {
        var index = result.indexOf(filmId);
        result.splice(index,1);
        return this.storage.set(STORAGE_KEY,result);
      }
    })
  }
}

这正是我尝试将服务导入组件的方式：-

import { Injectable } from '@angular/core';
import { Storage } from '@ionic/storage';
import { SQLite,SQLiteObject } from '@ionic-native/sqlite';

const STORAGE_KEY = 'favoriteFilms';
const STORAGE_KEY1 = 'favoritePlanets';

@Injectable({
  providedIn: 'root'
})
export class FavoriteService {

  constructor(private storage: Storage) {
  }

  getAllFavoriteFilms() {
    return this.storage.get(STORAGE_KEY);
  }

  getAllFavoritePlanets() {
    return this.storage.get(STORAGE_KEY1);
  }
 
  isFavorite(filmId) {
    return this.getAllFavoriteFilms().then(result => {
      return result && result.indexOf(filmId) !== -1;
    });
  }

  isFavorite(planetId) {
    return this.getAllFavoritePlanets().then(result => {
      return result && result.indexOf(planetId) !== -1;
    });
  }


   favoriteFilm(filmId) {
    return this.getAllFavoriteFilms().then(result => {
      result = result || [];
      result.push(filmId);
      return this.storage.set(STORAGE_KEY,result);
    });
  }

  favoritePlanet(planetId) {
    return this.getAllFavoriteFilms().then(result => {
      result = result || [];
      result.push(planetId);
      return this.storage.set(STORAGE_KEY1,result);
      }
    })
  }

  unfavoriteFilm(planetId) {
    return this.getAllFavoritePlanets().then(result => {
      if (result) {
        var index = result.indexOf(planetId);
        result.splice(index,1);
        return this.storage.set(STORAGE_KEY1,result);
      }
    })
  }
}

这是我每次重复得到的错误消息（x4次）：-

重复的函数实现。 ts（2393）

组件页面（planet-details.page.ts）如下：-

import { Component,OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ApiService } from 'src/app/services/api.service';
import { EmailComposer } from '@ionic-native/email-composer/ngx';
import { FavoriteService } from 'src/app/services/favorite.service';

@Component({
  selector: 'app-planet-details',templateUrl: './planet-details.page.html',styleUrls: ['./planet-details.page.scss'],})
export class PlanetDetailsPage implements OnInit {

  planet: any;
  isFavorite = false;
  planetId = null;
 
  constructor(private activatedRoute: ActivatedRoute,private api: ApiService,private emailComposer: EmailComposer,private favoriteService: FavoriteService) { }
 
  ngOnInit() {
    let id = this.activatedRoute.snapshot.paramMap.get('id');
    this.api.getPlanet(id).subscribe(res => {
      this.planet = res;
      console.log(res);
    });
  }
  favoritePlanet() {
    this.favoriteService.favoritePlanet(this.planetId).then(() => {
      this.isFavorite = true;
    });
  }

  unfavoritePlanet() {
    this.favoriteService.unfavoritePlanet(this.planetId).then(() => {
      this.isFavorite = false;
    });
  }

  sharePlanet() {
    let email = {
      to: "",subject: `I love this planet: ${this.planet.name}`,body: `Do you like it?<br><br>"${this.planet.opening_crawl}"`,isHtml: true
    };

    this.emailComposer.open(email);
  }

}

planet-details.page.html如下：-

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/tabs/planets"></ion-back-button>
    </ion-buttons>
    <ion-title>{{ planet?.title }}</ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="unfavoritePlanet()" *ngIf="isFavorite">
        <ion-icon name="star" slot="icon-only" color="secondary"></ion-icon>
      </ion-button>
      <ion-button (click)="favoritePlanet()" *ngIf="!isFavorite">
        <ion-icon name="star-outline" slot="icon-only"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-card *ngIf="planet" class="planet-card">
    <ion-item class="planet-card" lines="none">
      <ion-icon name="cloudy-night-outline" slot="start"></ion-icon>
      Climate for {{ planet.name }}: {{ planet.climate }}
    </ion-item> 

    <ion-item class="planet-info" lines="none">
      <ion-icon name="planet" slot="start"></ion-icon>
      Rotation Period: {{ planet.rotation_period }}
    </ion-item> 
     
    <ion-item class="planet-info1" lines="none">
      <ion-icon name="people-outline" slot="start"></ion-icon>
      Population: {{ planet.population }}
    </ion-item>
  </ion-card>
 
<ion-button expand="full" (click)="sharePlanet()">Share by Email</ion-button>

</ion-content>

我得到的两个错误与收藏夹（service.ts）中上面概述的ts.2393（重复函数实现）中的两个错误相同，但现在仅得到2个错误，而不是4个。这两个错误都是由于重复' isFavorite（filmId）和isFavorite（planetId）。

src / app / services / favorite.service.ts中的
ERROR：24：3-错误TS2393：功能实现重复。 [ng] [ng] 24
isFavorite（filmId）{[ng] ~~~~~~~~~~ [ng]
src / app / services / favorite.service.ts：30：3-错误TS2393：重复功能实现。 [ng] [ng] 30 isFavorite（planetId） {[ng] ~~~~~~~~~~

无法重复的Ionic5 FavoriteService

如何解决无法重复的Ionic5 FavoriteService

相关推荐