我正在處理一個 Angular 12 專案，我正在使用 JSON-server 存盤資料。CRUD 操作作業正常。
但是當我使用表單添加新專案時， 洗掉和更新按鈕將不起作用，除非我重繪 頁面。
這是我在控制臺中得到的錯誤，在我點擊洗掉按鈕后，（沒有重繪 ）。
產品.服務.ts
url = environment.url 'products/';
constructor(private http: HttpClient) {}
getListProduct() {
return this.http.get<Product[]>(this.url);
}
addProduct(product: Product) {
return this.http.post(this.url, product);
}
deleteProduct(id: string) {
return this.http.delete(this.url id);
}
updateProduct(product: Product) {
return this.http.put(this.url product.id, product);
}
}
main-product.component.ts
export class MainProductComponent implements OnInit {
inputProduct: Product = new Product();
isForm: Boolean = false;
buttonString: String = 'Add New Product';
listProduct: Product[] = [];
constructor(private productService: ProductService) {}
ngOnInit(): void {
this.productService
.getListProduct()
.subscribe((data: Product[]) => (this.listProduct = data));
}
changePage() {
this.isForm = !this.isForm;
if (this.isForm) {
this.buttonString = 'Go Back To List';
} else {
this.inputProduct = new Product();
this.buttonString = 'Add New Product';
}
}
deleteProduct(p: Product) {
let i = this.listProduct.indexOf(p);
this.productService
.deleteProduct(p.id)
.subscribe(() => this.listProduct.splice(i, 1));
}
saveProduct(product: Product) {
let i = this.listProduct.indexOf(product);
if (i != -1) {
//update a product
this.productService
.updateProduct(product)
.subscribe(() => (this.listProduct[i] = product));
} else {
//add a new product
this.productService.addProduct(product).subscribe(
() => this.listProduct.push(product),
() => console.log('error')
);
}
this.isForm = false;
this.buttonString = 'Add New Product';
this.inputProduct = new Product();
}
updateProduct(p: Product) {
this.isForm = true;
this.inputProduct = p;
}
form-product.component.ts
export class FormProductComponent implements OnInit {
selectedFile = null;
private product!: Product;
productForm!: FormGroup;
@Input() updateProduct!: Product;
@Output() addEvent = new EventEmitter<Product>();
constructor(private builder: FormBuilder) {}
ngOnInit(): void {
if (this.updateProduct === null) {
this.product = new Product();
} else {
this.product = this.updateProduct;
}
this.productForm = this.builder.group({
title: [
this.product.libelle,
[Validators.required, Validators.minLength(3)],
],
price: [
this.product.prixUnitaire,
[Validators.required, Validators.min(10)],
],
photo: [this.product.photo, Validators.required],
category: [this.product.categorie, Validators.required],
});
}
upload(event: any) {
this.selectedFile = event.target.files[0].name;
console.log(this.selectedFile);
}
addProduct() {
this.product.libelle = this.productForm.value.title;
this.product.prixUnitaire = this.productForm.value.price;
this.product.photo = String(this.selectedFile);
this.product.categorie = this.productForm.value.category;
this.addEvent.emit(this.product);
}
}
uj5u.com熱心網友回復：
有點難以確定，但看起來您并沒有保存前端陣列中創建的回應。
最有可能的代碼應該如下
// add a new product
this.productService.addProduct(product).subscribe(
newProduct => this.listProduct.push(newProduct),
() => console.log('error')
);
我在手機上快速寫了上面的內容，這里有一個更詳細的答案。
我以前從未使用json-server過，所以這對我來說是未知的。根據他們的檔案，在他們的示例中，他們在將物件發送到 json 服務器之前在物件上創建了 id。我看不到你的產品類別，所以我不知道你是否正在為你的物件生成一個 id...我猜不是。
此類最常見的作業流程是前端將創建一個沒有 id 的物件，將其發送到后端，后端將其保存在某種資料存盤中。該程序還為該物件生成 id，并將其作為物件的一部分從 create 呼叫中回傳。然后前端能夠通過 id（get、put、delete 等）對該物件執行進一步的操作。
在您的代碼中，您沒有將后端回傳的物件推送到陣列中，而是將要發送到陣列中的后端的物件推送到陣列中。同樣，在沒有 id 的典型場景中。
如果 json-server 要求您創建和分配 id，那么您需要更新您的產品類以在它更新時分配一個 id。
您必須從陣列中獲取產品的邏輯是有效的，因為您得到的錯誤不是它找不到“未定義的 id”，而是代碼正在查找產品，而是該產品物件上的 id 屬性未定義。
同樣，通常該 id 來自后端，如果這發生在這里，那么您將無法獲得它，因為您沒有將來自后端的物件添加到您的陣列中。如果 json-server 要求您將 id 傳遞給它，那么您將需要更新前端代碼以生成 id，然后一切都應該適合您。
uj5u.com熱心網友回復：
陰莖發育是對的。您也可以在添加或洗掉后重新獲取串列。（如果您想運行一些計算和查詢或為串列設定一些服務器端排序）
就像是：
constructor(private productService: ProductService) {}
ngOnInit(): void {
this.fetchList(); // This Line
}
fetchList() { // This Function
this.productService
.getListProduct()
.subscribe((data: Product[]) => (this.listProduct = data));
}
deleteProduct(p: Product) {
let i = this.listProduct.indexOf(p);
this.productService
.deleteProduct(p.id)
.subscribe(() => {
this.fetchList(); // This Line
});
}
saveProduct(product: Product) {
let i = this.listProduct.indexOf(product);
if (i != -1) {
//update a product
this.productService
.updateProduct(product)
.subscribe(() => (this.listProduct[i] = product));
} else {
//add a new product
this.productService.addProduct(product).subscribe(() => {
this.fetchList(); // This Line
}, () => console.log('error'));
}
this.isForm = false;
this.buttonString = 'Add New Product';
this.inputProduct = new Product();
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/373484.html