角度为“ ERROR TypeError：无法读取未定义的属性'match'”

Question

我正在尝试为我的项目实施ng2-image-viewer。到目前为止，当我尝试将图像的URL传递给此插件时，一切都工作正常，控制台抛出了奇怪的错误，但一切都工作顺利。

以下是我的

showcase.component.html ，

<p>{{ activatedRouteArt | json }}</p>
<div id="image-viewer-container">
    <app-image-viewer 
    [images]="[artURL]"
    [loadOnInit]="true"
    [idContainer]="'idOnHTML'"
    [showOptions]="true"
    >
    </app-image-viewer>
</div>

showcase.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { RawImportData } from 'src/app/models/common/raw-import-data';
import { Artdata } from 'src/app/models/artdata';
import { DataService } from 'src/app/services/data.service';

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

  activatedRouteArt: RawImportData<Artdata> = new RawImportData();
  activatedRouteID: number;
  artURL:string;

  constructor(private dataService: DataService,private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.params.subscribe(params => {
      this.activatedRouteID = +params.id;
    });
    this.fetchArts('all',this.activatedRouteID,'1','50');
  }
  fetchArts(route:string ='all', id:any, page:any, limit:any){
    this.dataService.getArtsAPI(route, id.toString(), page.toString(), limit.toString()).subscribe((data: RawImportData<Artdata>)=>{
      if(data) this.activatedRouteArt=data;
      this.artURL=this.dataService.dataServerURL+this.activatedRouteArt.records['0'].URL;
      console.log(this.artURL);
    }); 
  }
}

这是错误控制台抛出的错误，但它没有执行任何操作，我的意思是我的图像已经显示。

Angular is running in the development mode. Call enableProdMode() to enable the production mode.
ImageViewerComponent.html:1 ERROR TypeError: Cannot read property 'match' of undefined
    at ImageViewerComponent.push../node_modules/ng2-image-viewer/ng2-image-viewer.umd.js.ImageViewerComponent.isURlImagem (ng2-image-viewer.umd.js:315)
    at Object.eval [as updateRenderer] (ImageViewerComponent.html:1)
    at Object.debugUpdateRenderer [as updateRenderer] (core.js:45293)
    at checkAndUpdateView (core.js:44276)
    at callViewAction (core.js:44636)
    at execEmbeddedViewsAction (core.js:44593)
    at checkAndUpdateView (core.js:44271)
    at callViewAction (core.js:44636)
    at execEmbeddedViewsAction (core.js:44593)
    at checkAndUpdateView (core.js:44271)
View_ImageViewerComponent_17 @ ImageViewerComponent.html:1
...
showcase.component.ts:30 http://localhost/artworks/art/a/abbati/abbati1.jpg
client:52 [WDS] Live Reloading enabled.

编辑

当我用静态字符串替换URL时，错误消失了，例如。在这种情况下没有错误

showcase.component.html

<p>{{ activatedRouteArt | json }}</p>
<div id="image-viewer-container">
    <app-image-viewer 
    [images]="['http://localhost/artworks/art/a/abbati/abbati1.jpg']"
    [loadOnInit]="true"
    [idContainer]="'idOnHTML'"
    [showOptions]="true"
    >
    </app-image-viewer>
</div>

Answer 1

这是因为artURL变量没有任何内容，因此在加载组件时未初始化。

您需要建立至少一个空字符串，例如：

artURL ="";

或者在数据服务获得最终URL的地方显示默认图像，并且当您将最终URL的值分配给artURL时，相同的角度框架将刷新图像；

当您放置一个固定的url时，由于artURL不再是一个空变量，它没有值，因此不会显示错误。