core.js：5873错误TypeError：无法读取HomeComponent_Template（home.component.html：3）上未定义的属性“文件名”

时间：2020-04-12 19:51:20

标签： node.js angular http

这是我的home.component.ts文件：

import { Component, OnInit, Inject } from '@angular/core';
import { ImagesService} from '../services/images.service';
import { Image } from '../shared/image';


@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

  home_header: Image;
  errMess: string;

  constructor(private imageService: ImagesService,
    @Inject('baseURL') public baseURL ) { }

    ngOnInit() {
      this.imageService.getImages()
      .subscribe(images => {
        this.home_header = images.find(image => image.filename == 'home_header.jpg');
        console.log('log image: ' , this.home_header);}
      ,errmess => this.errMess = <any>errmess);

    }

}

以下是我的home.component.html文件：

<mat-toolbar class="general-toolbar2">
  <div class="image">
    <img src="{{ baseURL + home_header.filename }}" height=100% width=100%>

</div>
</mat-toolbar>

<!--
  <span class="text-alignments">هوش برتر</span>
    <img src="{{ baseURL + home_header.filename}}" height=100% width=100%>
  -->

<div class="container footer" 
    fxLayout="row" 
    fxLayout.sm="column" 
    fxLayout.xs="column" 
    fxLayoutAlign.xs="start center" 
    fxLayoutAlign.sm="start center"
    fxLayoutAlign.gt-sm="center center" 
    fxLayoutWrap 
    fxLayoutGap="10px"
    dir="rtl">

  <div fxFlex="100%" fxFlex.gt-sm="50%">
    <div fxLayout="row">
      <div fxFlex="40" fxFlexOffset="20px" >
        <h4>پیوند ها</h4>
        <mat-list>
          <mat-list-item><a mat-button routerLink="/home" routerLinkActive="active" style="color:white;">خانه</a></mat-list-item>
          <mat-list-item><a mat-button routerLink="/users" routerLinkActive="active" style="color:white">درباره ما</a></mat-list-item>
          <mat-list-item><a mat-button routerLink="/menu" routerLinkActive="active" style="color:white">استراتژی</a></mat-list-item>
          <mat-list-item><a mat-button routerLink="/contactus" routerLinkActive="active" style="color:white">تماس با ما</a></mat-list-item>
        </mat-list>
      </div>
      <div fxFlex="50">
        <h4>نشانی ما</h4>
        <address style="text-size: 80%">
          ولنجک، دانشگاه شهید بهشتی<br> مرکز رشد فناوری<br> واحد 320<br>
          <i class="fa fa-phone"></i>: 29903234 021<br>
          <!-- <i class="fa fa-fax"></i>: <br> -->
          <i class="fa fa-envelope"></i>:
          <a href="mailto:hooshbartar.co@gmail.com">hooshbartar.co@gmail.com</a>
        </address>
      </div>
    </div>
  </div>
  <div fxFlex="100%" fxFlex.gt-sm="45%">
    <div style="text-align:center">
      <a mat-icon-button class="btn-google-plus" href="http://google.com/+"><i class="fa fa-google-plus fa-lg"></i></a>
      <a mat-icon-button class="btn-facebook" href="http://www.facebook.com/profile.php?id="><i class="fa fa-facebook fa-lg"></i></a>
      <a mat-icon-button class="btn-linkedin" href="http://www.linkedin.com/in/"><i class="fa fa-linkedin fa-lg"></i></a>
      <a mat-icon-button class="btn-twitter" href="http://twitter.com/"><i class="fa fa-twitter fa-lg"></i></a>
      <a mat-icon-button class="btn-youtube" href="http://youtube.com/"><i class="fa fa-youtube fa-lg"></i></a>
      <a mat-icon-button class="btn-mail" href="mailto:hooshbartar.co@gmail.com"><i class="fa fa-envelope-o fa-lg"></i></a>
    </div>
  </div>
</div>

也baseurl.ts：

export const baseURL = 'https://localhost:3443/';

当我从html文件中删除下面的代码行<img src="{{ baseURL + home_header.filename }}" height=100% width=100%>时，我得到以下结果：

log image:  
{_id: "5e9051503af5a25cc487abe8", fieldname: "imageFile", originalname: "home_header.jpg", encoding: "7bit", mimetype: "image/jpeg", …}
_id: "5e9051503af5a25cc487abe8"
fieldname: "imageFile"
originalname: "home_header.jpg"
encoding: "7bit"
mimetype: "image/jpeg"
destination: "public/images"
filename: "home_header.jpg"
path: "public\images\home_header.jpg"
size: 58277
createdAt: "2020-04-10T10:58:24.710Z"
updatedAt: "2020-04-10T10:58:24.710Z"
__v: 0
__proto__:
constructor: ƒ Object()
__defineGetter__: ƒ __defineGetter__()
__defineSetter__: ƒ __defineSetter__()
hasOwnProperty: ƒ hasOwnProperty()
__lookupGetter__: ƒ __lookupGetter__()
__lookupSetter__: ƒ __lookupSetter__()
isPrototypeOf: ƒ isPrototypeOf()
propertyIsEnumerable: ƒ propertyIsEnumerable()
toString: ƒ ()
valueOf: ƒ valueOf()
toLocaleString: ƒ toLocaleString()
get __proto__: ƒ __proto__()
set __proto__: ƒ __proto__()

似乎一切正常，但是当我 ADD 添加到代码中时，出现以下错误：

core.js:5873 ERROR TypeError: Cannot read property 'filename' of undefined
    at HomeComponent_Template (home.component.html:3)
    at executeTemplate (core.js:11930)
    at refreshView (core.js:11777)
    at refreshComponent (core.js:13217)
    at refreshChildComponents (core.js:11508)
    at refreshView (core.js:11829)
    at refreshDynamicEmbeddedViews (core.js:13142)
    at refreshView (core.js:11800)
    at refreshComponent (core.js:13217)
    at refreshChildComponents (core.js:11508)
defaultErrorLogger @ core.js:5873
handleError @ core.js:5926
(anonymous) @ core.js:42696
invoke @ zone-evergreen.js:365
run @ zone-evergreen.js:124
runOutsideAngular @ core.js:41093
tick @ core.js:42693
(anonymous) @ core.js:42533
invoke @ zone-evergreen.js:365
onInvoke @ core.js:41257
invoke @ zone-evergreen.js:364
run @ zone-evergreen.js:124
run @ core.js:41032
next @ core.js:42530
schedulerFn @ core.js:36857
__tryOrUnsub @ Subscriber.js:183
next @ Subscriber.js:122
_next @ Subscriber.js:72
next @ Subscriber.js:49
next @ Subject.js:39
emit @ core.js:36819
checkStable @ core.js:41171
onHasTask @ core.js:41278
hasTask @ zone-evergreen.js:420
_updateTaskCount @ zone-evergreen.js:441
_updateTaskCount @ zone-evergreen.js:264
runTask @ zone-evergreen.js:185
drainMicroTaskQueue @ zone-evergreen.js:570
Promise.then (async)
scheduleMicroTask @ zone-evergreen.js:553
scheduleTask @ zone-evergreen.js:389
scheduleTask @ zone-evergreen.js:211
scheduleMicroTask @ zone-evergreen.js:231
scheduleResolveOrReject @ zone-evergreen.js:841
then @ zone-evergreen.js:967
bootstrapModule @ core.js:42232
./src/main.ts @ main.ts:11
__webpack_require__ @ bootstrap:79
0 @ main.ts:12
__webpack_require__ @ bootstrap:79
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1
core.js:5873 ERROR TypeError: Cannot read property 'filename' of undefined
    at HomeComponent_Template (home.component.html:3)
    at executeTemplate (core.js:11930)
    at refreshView (core.js:11777)
    at refreshComponent (core.js:13217)
    at refreshChildComponents (core.js:11508)
    at refreshView (core.js:11829)
    at refreshDynamicEmbeddedViews (core.js:13142)
    at refreshView (core.js:11800)
    at refreshComponent (core.js:13217)
    at refreshChildComponents (core.js:11508)
defaultErrorLogger @ core.js:5873
handleError @ core.js:5926
(anonymous) @ core.js:42696
invoke @ zone-evergreen.js:365
run @ zone-evergreen.js:124
runOutsideAngular @ core.js:41093
tick @ core.js:42693
(anonymous) @ core.js:42533
invoke @ zone-evergreen.js:365
onInvoke @ core.js:41257
invoke @ zone-evergreen.js:364
run @ zone-evergreen.js:124
run @ core.js:41032
next @ core.js:42530
schedulerFn @ core.js:36857
__tryOrUnsub @ Subscriber.js:183
next @ Subscriber.js:122
_next @ Subscriber.js:72
next @ Subscriber.js:49
next @ Subject.js:39
emit @ core.js:36819
checkStable @ core.js:41171
onLeave @ core.js:41332
onInvokeTask @ core.js:41241
invokeTask @ zone-evergreen.js:399
runTask @ zone-evergreen.js:168
invokeTask @ zone-evergreen.js:481
invokeTask @ zone-evergreen.js:1596
globalZoneAwareCallback @ zone-evergreen.js:1633
load (async)
customScheduleGlobal @ zone-evergreen.js:1735
scheduleTask @ zone-evergreen.js:386
onScheduleTask @ zone-evergreen.js:273
scheduleTask @ zone-evergreen.js:379
scheduleTask @ zone-evergreen.js:211
scheduleEventTask @ zone-evergreen.js:237
(anonymous) @ zone-evergreen.js:1907
(anonymous) @ http.js:2603
_trySubscribe @ Observable.js:42
subscribe @ Observable.js:28
call @ tap.js:16
subscribe @ Observable.js:23
subscribeToResult @ subscribeToResult.js:9
_innerSub @ mergeMap.js:59
_tryNext @ mergeMap.js:53
_next @ mergeMap.js:36
next @ Subscriber.js:49
(anonymous) @ subscribeToArray.js:3
_trySubscribe @ Observable.js:42
subscribe @ Observable.js:28
call @ mergeMap.js:21
subscribe @ Observable.js:23
call @ filter.js:13
subscribe @ Observable.js:23
call @ map.js:16
subscribe @ Observable.js:23
call @ catchError.js:16
subscribe @ Observable.js:23
ngOnInit @ header.component.ts:41
callHook @ core.js:3937
callHooks @ core.js:3901
executeInitAndCheckHooks @ core.js:3842
refreshView @ core.js:11795
refreshComponent @ core.js:13217
refreshChildComponents @ core.js:11508
refreshView @ core.js:11829
renderComponentOrTemplate @ core.js:11903
tickRootContext @ core.js:13379
detectChangesInRootView @ core.js:13413
detectChanges @ core.js:15093
tick @ core.js:42683
_loadComponent @ core.js:42733
bootstrap @ core.js:42659
(anonymous) @ core.js:42251
_moduleDoBootstrap @ core.js:42247
(anonymous) @ core.js:42202
invoke @ zone-evergreen.js:365
onInvoke @ core.js:41257
invoke @ zone-evergreen.js:364
run @ zone-evergreen.js:124
(anonymous) @ zone-evergreen.js:851
invokeTask @ zone-evergreen.js:400
onInvokeTask @ core.js:41235
invokeTask @ zone-evergreen.js:399
runTask @ zone-evergreen.js:168
drainMicroTaskQueue @ zone-evergreen.js:570
Promise.then (async)
scheduleMicroTask @ zone-evergreen.js:553
scheduleTask @ zone-evergreen.js:389
scheduleTask @ zone-evergreen.js:211
scheduleMicroTask @ zone-evergreen.js:231
scheduleResolveOrReject @ zone-evergreen.js:841
then @ zone-evergreen.js:967
bootstrapModule @ core.js:42232
./src/main.ts @ main.ts:11
__webpack_require__ @ bootstrap:79
0 @ main.ts:12
__webpack_require__ @ bootstrap:79
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1
Show 55 more frames
home.component.ts:23 log image:  {_id: "5e9051503af5a25cc487abe8", fieldname: "imageFile", originalname: "home_header.jpg", encoding: "7bit", mimetype: "image/jpeg", …}
home_header.jpg:1 GET https://localhost:3443/home_header.jpg 404 (Not Found)

问题出在哪里，我该如何解决？

编辑：当我在邮递员中查看https://localhost:3443/images/地址时，会看到以下结果：

[
    {
        "_id": "5e9051503af5a25cc487abe8",
        "fieldname": "imageFile",
        "originalname": "home_header.jpg",
        "encoding": "7bit",
        "mimetype": "image/jpeg",
        "destination": "public/images",
        "filename": "home_header.jpg",
        "path": "public\\images\\home_header.jpg",
        "size": 58277,
        "createdAt": "2020-04-10T10:58:24.710Z",
        "updatedAt": "2020-04-10T10:58:24.710Z",
        "__v": 0
    },
    {
        "_id": "5e90519c40aea44ca84df4ca",
        "fieldname": "imageFile",
        "originalname": "logo.png",
        "encoding": "7bit",
        "mimetype": "image/png",
        "destination": "public/images",
        "filename": "logo.png",
        "path": "public\\images\\logo.png",
        "size": 18534,
        "createdAt": "2020-04-10T10:59:40.979Z",
        "updatedAt": "2020-04-10T10:59:40.979Z",
        "__v": 0
    },
    {
        "_id": "5e90bcef40c2690f242d85a8",
        "fieldname": "imageFile",
        "originalname": "default_user.png",
        "encoding": "7bit",
        "mimetype": "image/png",
        "destination": "public/images",
        "filename": "default_user.png",
        "path": "public\\images\\default_user.png",
        "size": 13752,
        "createdAt": "2020-04-10T18:37:35.517Z",
        "updatedAt": "2020-04-10T18:37:35.517Z",
        "__v": 0
    }
]

我还在CMD中看到这些消息：

OPTIONS /images 204 0.147 ms - 0
GET /images 301 0.430 ms - 179
GET /images 301 0.493 ms - 179

1 个答案:

答案 0 :(得分：0)

就像错误消息所示，您正在尝试读取未定义对象的filename属性。发生这种情况是因为您的home_header变量仅在api调用返回时才分配。同时，该模板使用未定义的home_header变量呈现。

尝试仅在定义了home_header的情况下渲染图像

 <img *ngIf="home_header" src="....."
相关问题
最新问题