0

我正在尝试显示包含 2 个变量的数组中的图像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',
     },
   ];

}
4

2 回答 2

2

代码应该是 -

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

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

于 2018-12-27T06:40:32.010 回答
0

属性名称不正确。

<img class="dog-img"  src="{{dog.img}}">
于 2018-12-27T06:41:26.727 回答