반응형
최신 Angular의 ngSrc에 해당하는 것은 무엇입니까?
JSON 개체에서 오는 src와 함께 img를 구현하고 싶습니다.
AngularJS에서는 다음을 수행 할 수 있습니다.
<img ng-src="{{hash}}" alt="Description" />
Angular 2+에 이와 동등한 것이 있습니까?
AngularJS :
<img ng-src="{{movie.imageurl}}">
각도 2+ :
<img [src]="movie.imageurl">
보간은 동일한 결과를 얻을 수 있습니다.
<img src="{{vehicle.imageUrl}}">
<img [src]="vehicle.imageUrl">
양방향 바인딩을 원하지 않는 한 속성 바인딩에 대한이 두 문 사이에는 기술적 인 차이가 없습니다.
보간은 대부분의 경우 속성 바인딩을위한 편리한 대안입니다. 실제로 Angular는 뷰를 렌더링하기 전에 해당 보간을 해당 속성 바인딩으로 변환합니다. 출처
Angular 애플리케이션에서 ng-src와 동일한 기능을 달성하는 것은 2 단계 프로세스입니다.
첫 번째 단계:
HTML에서 새 구문을 사용하십시오.
<img [src]="imageSrc">
두번째 단계:
구성 요소 / 지시문에서 값을 비어 있도록 초기화하십시오 . 예를 들면 :
@Component({
selector: 'ag-video',
templateUrl: './video.component.html'
})
export class SampleComponent {
imageSrc = '';
}
이제 null
요소에 값이 설정되지 않아 네트워크 호출 (빈 호출) 이 제거 됩니다.
다음과 같은 보간 형식으로 작성할 수도 있습니다.
<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>
참고 URL : https://stackoverflow.com/questions/37965667/whats-equivalent-to-ngsrc-in-the-newer-angular
반응형
'code' 카테고리의 다른 글
EXECUTE 이후 트랜잭션 수는 BEGIN 및 COMMIT 문의 일치하지 않는 수를 나타냅니다. (0) | 2020.10.07 |
---|---|
--harmony_modules 옵션을 사용하여 노드 v6.0.0에서 ES2015 "가져 오기"가 작동하지 않음 (0) | 2020.10.07 |
'Microsoft.ACE.OLEDB.16.0'공급자가 로컬 컴퓨터에 등록되지 않았습니다. (0) | 2020.10.07 |
파이썬의 문자열에서 인쇄 할 수없는 문자 제거 (0) | 2020.10.07 |
Laravel에서 현재 날짜, 시간, 요일 가져 오기 (0) | 2020.10.06 |