1
저는 typescript를 사용하여 Angular 2로 기본 서점 응용 프로그램을 작성합니다. selectedBook(b: Books)은 내 BookComponent의 한 방법입니다. 장바구니에 중복 도서가 추가되고 장바구니에 책을 추가 할 때 책이 증가하지 않습니다. 각도 2
프로그램이 실행
는, 책의 목록은 표에 표시되고 각 책 그것은 을 소유 버튼 "장바구니에 추가"했다. 장바구니 버튼에selectedBook(b: Books)방법을 추가의 클릭에는 &라고 선택한 책은 매개 변수로 메소드에 전달됩니다.
- 더 많은 방법은 책을 추가해서는 안되는 중복 도서 인 경우 변수
cartArray(도서 모델 배열)에 책을 추가해야합니다. 가 중복 bookQuantity으로, 카트에 책 테이블보기에서 감소시키고 추가를 클릭하는 동안 (여기서부터 시작하는 나도 몰라 이에 대한 내가 가 작성하지 않은 코드) - , 그것은
cartArray에 증가한다.
books.model : (I 예상대로하지만이 작동하지 않습니다)
export interface Books {
id: number,
bookId: string,
bookName: string,
bookQuantity: number,
bookPrice: string,
bookAuthor: string,
bookPublished: string
}
이 selectedBook(b: Books) 방법 내에서 작업하기 :
selectedBook(b: Books)를 처음 호출되면이 선택한 책을 감소 수량을 장바구니에 추가합니다. 동일한bookId으로 책이 존재하거나 가 존재하는 경우는 불리언 변수duplicateBook다른truefalse로 설정되지 않은 경우에있어서 그것이라고- 다음번 카트 및 검사의 요소 을 반복.
duplicateBook이false인 경우cartArray에 책을 추가하십시오. - 마지막으로
cartArray을 localstorage에 저장합니다.
BookComponent는 :
import {Component} from 'angular2/core';
import {Books} from '../models/books.model';
@Component({
selector: 'book',
templateUrl: `
<table class="table table-hover">
<tr>
<th>ID</th>
<th>Name</th>
<th>Quantity</th>
<th>Price</th>
<th>Author</th>
<th>Publisher</th>
<th>Actions</th>
</tr>
<tr *ngFor="#b of books">
<td><a>{{ b.bookId }}</a></td>
<td>{{ b.bookName }}</td>
<td>{{ b.bookQuantity }}</td>
<td>{{ b.bookPrice }}</td>
<td>{{ b.bookAuthor }}</td>
<td>{{ b.bookPublished }}</td>
<td>
<button type="button" class="btn btn-primary" *ngIf="b.bookQuantity > 0" (click)="selectedBook(b)">Add to cart</button>
<div *ngIf="b.bookQuantity < 1">Out of stock</div>
</td>
</tr>
</table>
`
})
export class BooksComponent {
books: Books[] = [
{ id: 1, bookId: '1', bookName: 'C', bookQuantity: 7, bookPrice: '2345', bookAuthor: 'fsdf', bookPublished: 'edsdf' },
{ id: 2, bookId: '2', bookName: 'Java', bookQuantity: 52, bookPrice: '3242', bookAuthor: 'sdfs', bookPublished: 'fghzxdffv' },
{ id: 3, bookId: '3', bookName: 'SQL', bookQuantity: 7, bookPrice: '5645', bookAuthor: 'dfghrty', bookPublished: 'ghjghj' }
];
cart: Books[] = [];
duplicateBook: boolean = false;
selectedBook(b: Books)
{
b.bookQuantity = b.bookQuantity - 1;
if (this.cart.length == 0) {
//b.bookQuantity = 1;
this.cart.push(b);
}
else {
for (let e of this.cart) {
console.log(e.bookId, "==", b.bookId);
if (e.bookId == b.bookId) {
console.log("Book is in cart");
this.duplicateBook = true;
break;
}
}
if (!this.duplicateBook) {
//increment previously added book quantity in cart by 1
this.cart.push(b);
}
}
localStorage.clear();
localStorage.setItem('cartItems', JSON.stringify(this.cart));
console.log("Cart contents are : ", this.cart);
}
}