时间戳

首页 > 解决方案 > 属性绑定内部的属性绑定

html - 属性绑定内部的属性绑定

问题描述

我有一个对象数组：

collections = [
          {name: 'one', productOne: 'image-url', productTwo: 'image-url'},
          {name: 'two', productOne: 'image-url', productTwo: 'image-url'},
          {name: 'three', productOne: 'image-url', productTwo: 'image-url'},
          {name: 'four', productOne: 'image-url', productTwo: 'image-url'},
]

如您所见，每个对象都包含一个图像 url。假设我在 productTwo 的产品页面上，因此我想显示 productTwo 的图像。我还有一个对象 ( product)，其中包含产品名称，因此我知道我所在产品页面的产品名称。

如何显示正确的图像？您可以通过三个问号找到问题的位置。

我不能只使用collection.productTwo，因为产品页面应该是动态的，并且应该调整为当前产品的页面。

这可能听起来令人困惑，但这种方法可能会更说明问题：

<img [src]="collection. + product.name" [alt]="collection.name" class="w-75 align-self-center">

这甚至可能吗？


代码：

<div class="container-fluid px-0 top-container" *ngIf="product" [style.position]="fixed && !collections ? 'fixed' : 'static'">

  <div class="container-fluid bg-test justify-content-center min-vh-100 d-flex">
    <h1 class="align-self-center">{{product.name}}</h1>
  </div>

  <div class="container-fluid justify-content-center d-flex collections" *ngIf="collections" [style.position]="fixed && collections ? 'fixed' : 'static'">
    <div class="row align-self-center justify-content-around">
      <div class="col-12 mb-5 text-center">
        <h1>ALL COLLECTIONS</h1>
      </div>
      <div class="col-3" *ngFor="let collection of collections">
        <div class="flex-row">
          <div class="col-12 text-center">
            <h4>{{collection.name}}</h4>
            <p>- {{collection.desc}} -</p>
          </div>
          <div class="col-12 d-flex justify-content-center">
            <img [src]="???" [alt]="collection.name" class="w-75 align-self-center">
          </div>
        </div>
      </div>
    </div>
  </div>

</div>

标签： htmlangulartypescript

解决方案

您应该能够使用：

<img [src]="collection[product.name]" [alt]="collection.name" class="w-75 align-self-center">

推荐阅读