Аргумент типа "{ путь к файлу: строка; Путь к веб-виду: строка;} "не может быть назначен параметру типа "Фотография"

#ionic-framework #photo-gallery

Вопрос:

поэтому я пытаюсь создать образец проекта фотогалереи для ionic, и я застрял на этой ошибке. не совсем понимаю, что я имею в виду на самом деле. я попытался понизить рейтинг пакета npm. не сработало. все остальные вопросы как бы еще больше сбивают меня с толку, так что вот полная ошибка:

ошибка TS2345: Аргумент типа ‘{ путь к файлу: строка; webviewPath: строка; }’ не может быть присвоен параметру типа ‘Фотография’. [ng] Литерал объекта может указывать только известные свойства, а «путь к файлу» не существует в типе «Фотография».

1. вы возвращаетесь { filepath: string; webviewPath: string; }' из api, а затем читаете его через приложение или веб-страницу?

2. я читаю это через git bash. поэтому, в основном, когда я делаю ionic, он компилируется, а затем открывает вкладку broswer, на которой отображается само приложение . но когда появляется ошибка, она говорит, что не удалось скомпилировать

3. из того, что я вижу, когда вы пытаетесь сохранить путь к изображению в изображении, возможно, сохраните путь отдельно и попробуйте перейти к изображению с другим вызовом, используя путь.

Ответ №1:

Я считаю, что они допустили ошибку в учебнике. Они дают интерфейсу то же имя, что и при импорте фотографий из «@конденсатор/камера». Вместо этого дайте интерфейсу имя «UserPhoto».

Мой источник просматривает репозиторий ionic для этого проекта на GitHub: https://github.com/ionic-team/tutorial-photo-gallery-angular

Вам необходимо изменить следующее в photo.service.ts файле:

 export interface UserPhoto {
  filepath: string;
  webviewPath: string;
}

Это находится в нижней части файла, вне определения PhotoService класса.

Вам также необходимо определить массив типа UserPhoto , а не Photo в вашем PhotoService методе. Это выглядит так:

 export class PhotoService {
  
  public photos: UserPhoto[] = [];

Ответ №2:

У меня была аналогичная проблема, насколько я могу судить (и это сработало для меня), проблема в типе возврата этой функции:

   const savePicture = async (
    photo: Photo,
    fileName: string
  ): Promise<Photo> => {
    const base64Data = await base64FromPath(photo.webPath!);
    const savedFile = await Filesystem.writeFile({
      path: fileName,
      data: base64Data,
      directory: Directory.Data,
    });

    // Use webPath to display the new image instead of base64 since it's
    // already loaded into memory
    return {
      filepath: fileName,
      webviewPath: photo.webPath,
    };
  };

Так и должно быть Promise<UserPhoto> . Мы знаем это, потому что массив фотографий принимает записи типа UserPhoto.

Поэтому измените вышеуказанную функцию на:

  const savePicture = async (
    photo: Photo,
    fileName: string
  ): Promise<UserPhoto> => {
    const base64Data = await base64FromPath(photo.webPath!);
    const savedFile = await Filesystem.writeFile({
      path: fileName,
      data: base64Data,
      directory: Directory.Data,
    });

    // Use webPath to display the new image instead of base64 since it's
    // already loaded into memory
    return {
      filepath: fileName,
      webviewPath: photo.webPath,
    };
  };

Для справки, я говорю об этом уроке:
https://ionicframework.com/docs/react/your-first-app/saving-photos

В их git по большей части есть рабочий код, поэтому, пожалуйста, используйте его в качестве ссылки: https://github.com/ionic-team/tutorial-photo-gallery-react/blob/main/src/hooks/usePhotoGallery.ts