如何正确实施“ photo.service”？

时间：2018-08-27 04:40:09

标签： angular typescript

我正在使用Angular4。当我尝试输出图像时，出现404错误：

  

获取http://localhost:4200/photos/original/missing.png 404（未找到）

     

图片（异步）
  DefaultDomRenderer2.setProperty @ platform-b​​rowser.es5.js：2895   AnimationRenderer.setProperty @ animations.es5.js：534   DebugRenderer2.setProperty @ core.es5.js：13740   setElementProperty @ core.es5.js：9401   checkAndUpdateElementValue @ core.es5.js：9320   checkAndUpdateElementInline @ core.es5.js：9254   checkAndUpdateNodeInline @ core.es5.js：12337   checkAndUpdateNode @ core.es5.js：12284   debugCheckAndUpdateNode @ core.es5.js：13141   debugCheckRenderNodeFn @ core.es5.js：13120   （匿名）@ ProfileComponent.html：8   debugUpdateRenderer @ core.es5.js：13105   checkAndUpdateView @ core.es5.js：12256   callViewAction @ core.es5.js：12599   execEmbeddedViewsAction @ core.es5.js：12557   checkAndUpdateView @ core.es5.js：12252   callViewAction @ core.es5.js：12599   execEmbeddedViewsAction @ core.es5.js：12557   checkAndUpdateView @ core.es5.js：12252   callViewAction @ core.es5.js：12599   execComponentViewsAction @ core.es5.js：12531   checkAndUpdateView @ core.es5.js：12257   callViewAction @ core.es5.js：12599   execEmbeddedViewsAction @ core.es5.js：12557   checkAndUpdateView @ core.es5.js：12252   callViewAction @ core.es5.js：12599   execComponentViewsAction @ core.es5.js：12531   checkAndUpdateView @ core.es5.js：12257   callViewAction @ core.es5.js：12599   execEmbeddedViewsAction @ core.es5.js：12557   checkAndUpdateView @ core.es5.js：12252   callViewAction @ core.es5.js：12599   execComponentViewsAction @ core.es5.js：12531   checkAndUpdateView @ core.es5.js：12257   callWithDebugContext @ core.es5.js：13467   debugCheckAndUpdateView @ core.es5.js：13007   ViewRef_.detectChanges @ core.es5.js：10174   （匿名）@ core.es5.js：4812 ApplicationRef_.tick @ core.es5.js：4812   （匿名）@ core.es5.js：4684 ZoneDelegate.invoke @ zone.js：388   onInvoke @ core.es5.js：3890 ZoneDelegate.invoke @ zone.js：387   Zone.run @ zone.js：138 NgZone.run @ core.es5.js：3821   下一个@ core.es5.js：4684 schedulerFn @ core.es5.js：3635   SafeSubscriber。 tryOrUnsub @ Subscriber.js：238   SafeSubscriber.next @ Subscriber.js：185   Subscriber._next @ Subscriber.js：125   Subscriber.next @ Subscriber.js：89 Subject.next @ Subject.js：55   EventEmitter.emit @ core.es5.js：3621 checkStable @ core.es5.js：3855   onLeave @ core.es5.js：3934 onInvokeTask @ core.es5.js：3884   ZoneDelegate.invokeTask @ zone.js：420 Zone.runTask @ zone.js：188   ZoneTask.invokeTask @ zone.js：496 invokeTask @ zone.js：1540   globalZoneAwareCallback @ zone.js：1566错误（异步）
  customScheduleGlobal @ zone.js：1666   ZoneDelegate.scheduleTask @ zone.js：407 onScheduleTask @ zone.js：297   ZoneDelegate.scheduleTask @ zone.js：401   Zone.scheduleTask @ zone.js：232 Zone.scheduleEventTask @ zone.js：258   （匿名）@ zone.js：1831（匿名）@ http.es5.js：1274   Observable._trySubscribe @ Observable.js：171   Observable.subscribe @ Observable.js：159   ConnectableObservable.connect @ ConnectableObservable.js：39   RefCountOperator.call @ ConnectableObservable.js：108   Observable.subscribe @ Observable.js：156   AuthService._handleResponse @ auth.service.ts：592   AuthService.request @ auth.service.ts：574   AuthService.get @ auth.service.ts：498   PhotoService.getPhotos @ photo.service.ts：15   ProfileComponent.loadPhotos @ profile.component.ts：78   ProfileComponent.ngOnInit @ profile.component.ts：62   checkAndUpdateDirectiveInline @ core.es5.js：10843   checkAndUpdateNodeInline @ core.es5.js：12341   checkAndUpdateNode @ core.es5.js：12284   debugCheckAndUpdateNode @ core.es5.js：13141   debugCheckDirectivesFn @ core.es5.js：13082   （匿名）@ ProfileComponent_Host.html：1   debugUpdateDirectives @ core.es5.js：13067   checkAndUpdateView @ core.es5.js：12251   callViewAction @ core.es5.js：12599   execEmbeddedViewsAction @ core.es5.js：12557   checkAndUpdateView @ core.es5.js：12252   callViewAction @ core.es5.js：12599   execComponentViewsAction @ core.es5.js：12531   checkAndUpdateView @ core.es5.js：12257   callViewAction @ core.es5.js：12599   execEmbeddedViewsAction @ core.es5.js：12557   checkAndUpdateView @ core.es5.js：12252   callViewAction @ core.es5.js：12599   execComponentViewsAction @ core.es5.js：12531   checkAndUpdateView @ core.es5.js：12257   callWithDebugContext @ core.es5.js：13467   debugCheckAndUpdateView @ core.es5.js：13007   ViewRef_.detectChanges @ core.es5.js：10174   （匿名）@ core.es5.js：4812 ApplicationRef_.tick @ core.es5.js：4812   （匿名）@ core.es5.js：4684 ZoneDelegate.invoke @ zone.js：388   onInvoke @ core.es5.js：3890 ZoneDelegate.invoke @ zone.js：387   Zone.run @ zone.js：138 NgZone.run @ core.es5.js：3821   下一个@ core.es5.js：4684 schedulerFn @ core.es5.js：3635   SafeSubscriber .__ tryOrUnsub @ Subscriber.js：238   SafeSubscriber.next @ Subscriber.js：185   Subscriber._next @ Subscriber.js：125   Subscriber.next @ Subscriber.js：89 Subject.next @ Subject.js：55   EventEmitter.emit @ core.es5.js：3621 checkStable @ core.es5.js：3855   onHasTask @ core.es5.js：3903 ZoneDelegate.hasTask @ zone.js：441   ZoneDelegate._updateTaskCount @ zone.js：461   Zone。 updateTaskCount @ zone.js：285 Zone.runTask @ zone.js：205   rainMicroTaskQueue @ zone.js：595 Promise.then（异步）
  scheduleMicroTask @ zone.js：578   ZoneDelegate.scheduleTask @ zone.js：410   Zone.scheduleTask @ zone.js：232 Zone.scheduleMicroTask @ zone.js：252   scheduleResolveOrReject @ zone.js：862   ZoneAwarePromise.then @ zone.js：962   PlatformRef 。 bootstrapModuleWithZone @ core.es5.js：4537   PlatformRef .bootstrapModule @ core.es5.js：4522   （匿名）@ main.ts：11 ./src/main.ts @ main.bundle.js：1057   __webpack_require @ inline.bundle.js：55 0 @ main.bundle.js：1065    webpack_require @ inline.bundle.js：55 webpackJsonpCallback @ inline.bundle.js：26   （匿名）@ main.bundle.js：1

我做错了什么？

photo.service.ts：

import {Injectable} from '@angular/core';
import {Photo} from '../../models/photo.model';
import {handleError} from "../../shared/functions";
import { AuthService } from '../auth/auth.service';
import {Observable} from 'rxjs/Observable';

@Injectable()
export class PhotoService{
    constructor(
        private _authService:AuthService
    ){ 
    }

    getPhotos(){
        return this._authService.get('photos')
            .map(result => result.json())  
    }

}

photo.component.ts：

import { Component, OnInit} from '@angular/core';
import { AuthService } from "../../../services/auth/auth.service";
import { PhotoService} from "../../../services/photo/photo.service";
import { Photo} from "../../../models/photo.model";

@Component({
  selector: 'photo',
  templateUrl: './photo.component.html',
  styleUrls: ['./photo.component.scss'],
  providers: [PhotoService]
})

export class PhotoComponent implements OnInit {

  photos: Array<Photo>;

  filteredPhotos =[];

  constructor(
    protected authService:AuthService,
    private servPhoto: PhotoService
    ) {}

  ngOnInit() {
    this.loadPhotos();
  }

  private loadPhotos() {
    let filteredPhotos;
    if (this.servPhoto) {
      this.servPhoto.getPhotos().subscribe(
        photo => {
          if(!this.authService.currentUserData) {    
            return; 
          }
          this.photos = photo;
          this.filteredPhotos = this.photos.filter(
            (photo) => photo.users_id ==  this.authService.currentUserData.id
          );
        }
      );
    }
  }

}

photo.model.ts：

export class Photo{
    constructor(
        public users_id: number,
        public photo: Blob
    ) { }
}

photo.component.html：

<div class="container-fluid" *ngIf="authService.currentUserData">
   <img class="img" *ngFor="let photo of filteredPhotos" src="{{ photo.photo }}">
</div>

这是JSON本身：

[{"users_id":36,"photo":"/photos/original/missing.png"},

{"users_id":1,"photo":"/photos/original/missing.png"},

{"users_id":1428,"photo":"/photos/original/missing.png"}]

4 个答案:

答案 0 :(得分：0)

您有src="{{ photo.photo }}，而JSON有"photo":"/photos/original/missing.png"

您的错误：GET http://localhost:4200/photos/original/missing.png 404 (Not Found)只是在告诉您该照片不存在。

  

我做错了什么？

没什么错误。该代码只是试图加载不存在的图像。如果您想让404消失，请确保在JSON提供的上述网址中存在图片。

答案 1 :(得分：0)

我认为您的班级期望使用Blob数据类型时，您的服务会提供json。

答案 2 :(得分：0)

尝试这样：

如果您在filteredPhotos中得到了正确的答复

<div *ngIf="authService.currentUserData">
<div class="container-fluid" *ngFor="let photo of filteredPhotos" >
   <img class="img"  [src]="photo.photo">
</div>
</div>

答案 3 :(得分：0)

您需要在 angular.json 或 angular-cli.json 文件中找到文件夹。

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "frontend"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico",
        "photos"   //<==== you have to add this folder source here     
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.css",
        "../node_modules/font-awesome/css/font-awesome.min.css",
        "../node_modules/perfect-scrollbar/css/perfect-scrollbar.css",
        "./assets/sass/material-style.scss",
        "./assets/css/style.css",
        "../node_modules/primeicons/primeicons.css",
        "../node_modules/primeng/resources/themes/omega/theme.css",
        "../node_modules/primeng/resources/primeng.min.css",
        "../node_modules/quill/dist/quill.core.css",
        "../node_modules/quill/dist/quill.snow.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.js",
        "../node_modules/quill/dist/quill.js",
        "../node_modules/bootstrap/dist/js/bootstrap.js",
        "../node_modules/bootstrap-material-design/dist/js/ripples.min.js",
        "../node_modules/bootstrap-material-design/dist/js/material.min.js",
        "../node_modules/arrive/src/arrive.js",
        "../node_modules/chart.js/dist/Chart.js",
        "../node_modules/moment/moment.js",
        "../node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js",
        "../node_modules/bootstrap-notify/bootstrap-notify.js",
        "../node_modules/hammerjs/hammer.min.js"
      ],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "src/tsconfig.spec.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "e2e/tsconfig.e2e.json",
      "exclude": "**/node_modules/**"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {
    }
  },
  "warnings": {
    "typescriptMismatch": false
  }
}

然后停止您的 ng 或 npm 并再次运行。

现在 ng服务或 npm开始 这样可以解决您的问题

相关问题
最新问题