这是我的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/';
当我DELETEhtml文件中的以下代码行<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: "publicimageshome_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__()
似乎一切都很好，但当我将其添加到代码中时，我会得到以下错误：
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)
问题出在哪里？我该如何解决？
编辑：当我在Postman中检查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
正如错误消息所说，您正在尝试读取未定义对象的filename属性。之所以会发生这种情况，是因为只有当api调用返回时才会分配home_header变量。同时，模板使用未定义的home_header变量进行渲染。
如果home_header定义为，则尝试仅渲染图像
<img *ngIf="home_header" src="....."