มีอะไรเทียบเท่ากับ ngSrc ใน Angular ที่ใหม่กว่า

ฉันต้องการใช้ img โดยใช้ src มาจากออบเจ็กต์ JSON

ใน 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 แปลการแก้ไขเหล่านั้นเป็นการผูกคุณสมบัติที่สอดคล้องกันก่อนที่จะแสดงผลมุมมอง แหล่งที่มา

เป็นกระบวนการสองขั้นตอนเพื่อให้ได้ฟังก์ชันการทำงานเดียวกันของ ng-src ในแอปพลิเคชัน Angular ของคุณ

ขั้นแรก:

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