Что эквивалентно ngSrc в новом угловом?

Я хотел бы реализовать img, с src, поступающим из объекта JSON.

в AngularJS, я мог бы сделать:

<img ng-src="{{hash}}" alt="Description" />

есть ли эквивалент этому в угловой 2+?

4 66
angularjs

4 ответа:

AngularJS:

<img ng-src="{{movie.imageurl}}">

угловой 2+:

<img [src]="movie.imageurl">

Угловое документы

обратите внимание, что интерполяция может достичь того же результата:

<img src="{{vehicle.imageUrl}}">

<img [src]="vehicle.imageUrl">

нет никакой технической разницы между этими двумя утверждениями для привязки свойств, если вы не хотите двусторонней привязки.

интерполяция является удобной альтернативой для привязки свойств во многих случаи. На самом деле, угловой переводит те интерполяции в соответствующие привязки свойств перед отображением представления. источник

144

это двухэтапный процесс для достижения той же функциональности ng-src в вашем угловом приложении.

Первый Этап:

в вашем HTML используйте новый синтаксис:

<img [src]="imageSrc">

Шаг Второй:

в вашем компоненте/директиве инициализируйте значение пустой. Например:

@Component({
  selector: 'ag-video',
  templateUrl: './video.component.html'
})
export class SampleComponent {
   imageSrc = '';
}

Теперь это устранит null сетевой вызов (пустой вызов) из-за значения не устанавливается на элемент.

4
<tr *ngFor="let post of posts | paginate: { id: 'server', itemsPerPage: 
       10, currentPage: p , totalItems: count  }">

   <td>
    <img src="https://img.youtube.com/vi/{{post.youtubeVideoId}}/default.jpg">
   </td>

   <td>
     {{post.videoName}}
   </td>

</tr>
2

Он также может быть записан в форме интерполяции, например:

<img src="{{movie.imageurl}}">
1