Question

我正在尝试显示包含两个名为img和value的变量的数组中的图像。我能够显示value，但不能显示img（即图像），如下图所示：

模板出了什么问题？

下面是代码

HTML

   <div class="container" *ngFor="let dog of dogs">

        <div class="section">
            <p id="name">Dogs:</p>
            <img   class="dog-img"  src="{{dog.image }}" >
            <span>{{dog.value }}</span>         
        </div>

</div>

TS

   import { Component, OnInit, VERSION, ViewChild } from '@angular/core';
   export interface IDogs {
      img: string;
      value: string;
     }

   @Component({
    selector: 'app-selection-list',
    templateUrl: './selection-list.component.html',
     styleUrls: ['./selection-list.component.css']
     })

  export class SelectionListComponent{

  public dogs: IDogs[] =
    [
     {
       img:'https://material.angular.io/assets/img/examples/shiba2.jpg',
       value:'dog1',
     },
    {
      img:'https://material.angular.io/assets/img/examples/shiba2.jpg',
      value:'dog2',
     },
   ];

}

Answer 1

代码应为-

<img class="dog-img"  [src]="dog?.img" >

您正在使用dog.image，而对象中的属性名称是img。

Answer 2

属性名称错误。

<img class="dog-img"  src="{{dog.img}}">

从阵列显示图像

2 个答案: