Question

我有一个对象数组：

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>

Answer 1

您应该可以使用：

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

Answer 2

嗨，你能不能这样写呢？

   <!-- For the image of productOne -->
    <img [src]="collection?.productOne" [alt]="collection.name" class="w-75 align-self-center">

   <!-- For the image of productTwo-->
    <img [src]="collection?.productTwo" [alt]="collection.name" class="w-75 align-self-center">

如果值为?.，请不要忘记操作符null是安全的。

属性绑定内部的属性绑定

2 个答案: