Question

我正在使用Angular应用程序，在这个应用程序中我正在使用images.Image路径是通过API从数据库获取的。

当用户点击产品时，产品名称将传递给API，并且与产品相关的图像将作为响应。在我的应用程序中，我最多只能为特定产品创建五个图像。

如果我将鼠标悬停在图像上，它将显示它的大尺寸图像。

我的HTML

<div class="row">
      <img id="sm001" (mouseenter)="mouseEnter($event)"  src="{{smallImages['0']['small_Images']}}" alt="img1" class="img-thumbnail" [attr.ref]="bigImages['0']['big_Images']">
      <img id="sm005" (mouseenter)="mouseEnter($event)"  src="{{smallImages['1']['small_Images']}}" alt="img2" class="img-thumbnail" [attr.ref]="bigImages['1']['big_Images']">
      <img id="sm002" (mouseenter)="mouseEnter($event)"  src="{{smallImages['2']['small_Images']}}" alt="img3" class="img-thumbnail" [attr.ref]="bigImages['2']['big_Images']">
      <img id="sm003" (mouseenter)="mouseEnter($event)"  src="{{smallImages['3']['small_Images']}}" alt="img4" class="img-thumbnail" [attr.ref]="bigImages['3']['big_Images']">
      <img id="sm004" (mouseenter)="mouseEnter($event)"  src="{{smallImages['4']['small_Images']}}" alt="img5" class="img-thumbnail" [attr.ref]="bigImages['4']['big_Images']">
  </div>

我想做的是......

1，如果API只返回3个图像（最多为5个），我想隐藏剩余的2个img标签（我不想显示任何alt标签内容，只是想完全禁用img标签）。

2，如果API返回的图像路径不是（不存在于资产文件夹中）加载到img标记中，我想禁用该img标记。（空或null或＆＃34;＆＃34;或未定义）。

有可能请指导我解决这个问题。谢谢

Answer 1

关于问题1：

import mongo from 'mongodb'
import Promise from 'bluebird'

connect() {

  return new Promise((resolve, reject) => {

    const url = this.getConnectionURL()

    const client = mongo.MongoClient

    client.connect(url)
      .then((db) => {
        // never goes here in unit test environment.
        this._db = db
        resolve(db)
      })
      .catch((err) => {
        reject(err);
      })
  })
}

<div *ngFor="let image of smallImages"> <img [src]="image.small_Images" (mouseenter)="..."> </div>可让您访问其中的ngFor。这使它可以自动添加数组中可用的图像数量。

关于问题2：

这有点困难，因为这意味着您必须预先加载图像。

你可以查找一些方法来做到这一点，但我认为你在这里谈论两个非常不同的问题，所以通常你会把它变成两个不同的问题。

关于轻松（TypeScript中的JavaScript）预加载图像的方式：

let <value>

当然，您需要弄清楚如何在结果上运行此代码。因此，您正在谈论组件逻辑和模板逻辑之间的巨大差异;因此：这应该是一个不同的问题和一个不同的StackOverflow问题。

Answer 2

不是纯粹用HTML控制图像显示，而是应该使用“ngFor”循环查询针对API返回的图像集，如下所示：

<div class="row">
  <ng-template *ngFor="let image of images">
    <img id="{{image.id}}" (mouseenter)="mouseEnter($event)"  src="{{image.url_small}}" alt="{{image.alt}}" class="img-thumbnail" [attr.ref]="{{image.url_big}}">
  </ng-template>
</div>

当您处理返回图像数据的API的结果时，您将在您的Typescript代码中构造images数组作为控制器的属性。

“英雄之旅”在其关于显示数据here的页面上介绍了这一点。

如果您提供了针对您提出请求的API的更多详细信息，以及提出这些请求的实际代码，我可以提供更有针对性的答案，但希望您可以从此处获取。

如何在未加载图像或API返回路径在Angular4

2 个答案: