如何从Angular中的对象数组显示适当的元素属性

Question

我有问题。我展示了来自Angular7上一系列对象的元素。 单击“添加到购物车”按钮后，一直看到我只显示第一个元素的URL，而不显示被单击的URL（例如，我单击了第二个元素的按钮） 这是我的代码：

my.component.html

 <div *ngFor="let item of menuItems">
<div>
  <div>
    <p><img src="{{item.url}}" #catUrl></p>
  </div>
</div>
<div>
<button (click)="addToCart()" type="text"> Add to cart</button>
</div>

my.component.ts

  import { Component, ViewChild, ElementRef } from 
  '@angular/core';
  @Component({
  selector: 'my',
  templateUrl: './my.component.html',
  styleUrls: ['./my.component.scss']
  })
export class BbqComponent {
 @ViewChild('catUrl') catUrl: ElementRef;
 constructor() {}
 addToCart() {
   console.log(this.catUrl.nativeElement.src);

 }

}

感谢前进。