현재 div 외부의 * ngFor 변수 항목 에 액세스하는 방법이 있습니까? 제 경우에는 booking (item) 메서드가 항목 변수 에 액세스 할 수 없습니다 . 가능한 방법?
<div class="cart-item" *ngFor="let item of items">
<small>
<img [src]="item.imagePath" alt="{{item.name}}"
class="img-responsive" style="max-height: 100px" width="120px">
<p>Name: {{item.name}}</p>
<p>Price: {{item.price}}</p>
<button class="btn btn-danger" (click)="deleteItem(item)">X</button>
<hr/>
</small>
</div>
<button class="btn btn-primary btn-lg" (click)="booking(item)"
style="margin-right: 30px;">Book Now</button>
아니요, div 안에 넣어야합니다. 구조를 유지하려면 코드를 다른 div로 래핑하고 대신 ngFor 지시문을 사용해야합니다.
ngFor가 작동하는 방식은 요소를 생성하는 것입니다 (귀하의 경우 <div class="cart-item">루프의 각 항목에 대해 한 번씩 여러 번. 버튼은 모든 카트 항목 요소 뒤에 배치되므로 참조해야하는 항목을 어떻게 알 수 있습니까? 에?
당신이하려는 것은 각 장바구니 항목에 대해 하나의 버튼을 넣는 것입니다. 이 경우 다음과 같이 코드를 수정합니다.
<div class="cart-item" *ngFor="let item of items">
<small>
<img [src]="item.imagePath" alt="{{item.name}}" class="img-responsive" style="max-height: 100px" width="120px"/>
<p>Name: {{item.name}}</p>
<p>Price: {{item.price}}</p>
<button class="btn btn-danger" (click)="deleteItem(item)">X</button>
<hr/>
</small>
<button class="btn btn-primary btn-lg" (click)="booking(item)" style="margin-right: 30px;">Book Now</button>
</div>
또는 구조를 보존하려는 경우 :
<div *ngFor="let item of items">
<div class="cart-item">
<small>
<img [src]="item.imagePath" alt="{{item.name}}" class="img-responsive" style="max-height: 100px" width="120px"/>
<p>Name: {{item.name}}</p>
<p>Price: {{item.price}}</p>
<button class="btn btn-danger" (click)="deleteItem(item)">X</button>
<hr/>
</small>
</div>
<button class="btn btn-primary btn-lg" (click)="booking(item)" style="margin-right: 30px;">Book Now</button>
</div>
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다