Yeni Angular'da ngSrc ile eşdeğeri nedir?

JSON nesnesinden gelen bir src ile img uygulamak istiyorum.

AngularJS'de şunları yapabilirim:

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

Angular 2 + 'da buna eşdeğer var mı?

AngularJS:

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

Açısal 2+:

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

Açısal belgeler

Enterpolasyonun aynı sonucu elde edebileceğini unutmayın:

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

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

İki yönlü bağlama istemediğiniz sürece, bu iki özellik bağlama ifadesi arasında teknik bir fark yoktur.

İnterpolasyon, birçok durumda mülk bağlama için uygun bir alternatiftir. Aslında, Angular, görünümü oluşturmadan önce bu enterpolasyonları karşılık gelen özellik bağlamalarına çevirir. kaynak

Angular uygulamanızda ng-src'nin aynı işlevselliğini elde etmek için iki aşamalı bir süreçtir.

İlk adım:

HTML'nizde yeni sözdizimini kullanın:

<img [src]="imageSrc">

İkinci adım:

Bileşeninizde / direktifinizde, boş olması için değeri başlatın . Örneğin:

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

Şimdi, bu null, değerin öğeye ayarlanmaması nedeniyle ağ çağrısını (boş çağrı) ortadan kaldıracaktır .

Aşağıdaki gibi enterpolasyon biçiminde de yazılabilir:

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

<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>