programing

새로운 Angular에서 ngSrc와 동등한 것은 무엇입니까?

easyjava 2023. 10. 1. 23:04
반응형

새로운 Angular에서 ngSrc와 동등한 것은 무엇입니까?

JSON object에서 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="{{post.youtubeVideoId}}">
   </td>

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

</tr>

언급URL : https://stackoverflow.com/questions/37965667/whats-equivalent-to-ngsrc-in-the-newer-angular

반응형