CRUD操作的逻辑

Question

我正在使用角度进行CRUD操作。

逻辑：-

1. 我想使用表列表，并编辑，创建，查看想要在单个表单中执行的方法。
2. 对于表格，我使用以下代码作为按钮。

表组件HTML

    <button type="button" pButton icon="fa fa-plus"class="ui-button-success" label="New" [routerLink]="['/master/productcategory']"> 
    </button>
    <button type="button" pButton icon="fa fa-pencil" iconPos="left" class="ui-button-success" [routerLink]="['/master/productcategory/edit',productcategory.id]">
    </button>
    <button type="button" pButton icon="fa fa-eye" iconPos="left" class="ui-button-success" [routerLink]="['/master/productcategory/view',productcategory.id]"> 
    </button>

以下是我的表。

3. 当我们点击编辑时，我们需要显示SAVE＆CANCEL按钮

4. 当我们点击新的时，我们需要显示CREATE＆CANCEL按钮

5. 而对于视图，只有CANCEL按钮可见

问题：-

我使用的逻辑是，当id从表中传递时，它将保存到变量productCategoryIdToUpdate中。

然后使用if else条件我写了，

IF(productCategoryIdToUpdate === null）然后执行CREATE功能。 ELSE执行更新功能。

现在我需要为编辑和视图传递id。由于我写的逻辑，同样的编辑表单也在VIEW表单中显示。

如何编写逻辑以进行编辑和查看。有谁能够帮我？？

**表格HTML： - **

    <div class="ui-grid-col-1">
        <button type="submit" pButton label="Create" 
          [disabled]="!productCategoryForm.valid" 
          *ngIf="!productCategoryIdToUpdate">
        </button>
        <button type="submit" pButton label="Save" 
          [disabled]="!productCategoryForm.valid" 
          *ngIf="productCategoryIdToUpdate">
        </button>
     </div>
     <div class="ui-grid-col-1">
        <button type="button" class="ui-button-secondary" pButton 
            label="Cancel" (click)="backToCreateProductCategories()"> 
        </button>
      </div>

FORM COMPONENT.TS

onProductCategoryFormSubmit() {
    if (this.productCategoryForm.invalid) {
        return; 
    }
   let productCategory = this.productCategoryForm.value;
   if (this.productCategoryIdToUpdate === null) {
     //Create product
       this.service.createProductCategory(productCategory).subscribe(
        successCode => {
         this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Product Created' });
      this.backToCreateProductCategories() ;
      }
     );
  } else {
  //Handle update product
     productCategory.id = this.productCategoryIdToUpdate;
     this.service.updateProductCategory(productCategory).subscribe(
       successCode => {
        this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Product Editted' });
     }
   );
  }
 }

要回到表格（取消按钮）

    backToCreateProductCategories() {
       this.productCategoryIdToUpdate = null;
       this.router.navigate(['/master/productcategories']);
    }

Answer 1

一种方法是使用标志，可以使用属性根据用户交互更改行为。

每次用户单击按钮时，您都知道用户意图是什么，因此您可以启用/禁用元素或基于此显示/隐藏。

在这种情况下，您可以使用isAdding和isEditing根据需要启用和禁用按钮。

在您的组件中：

isEditing = false;
isAdding = false;

  onAdd() {
    this.isAdding = true;

    // your logic goes here
  }

  onEdit() {
    this.isEditing = true;

    // your logic goes here
  }

  onCancel() {
    this.isAdding = false;
    this.isEditing = false;
  }

在你看来：

<button [disabled]="isEditing" (click)="onAdd()">Add</button>
<button [disabled]="isAdding" (click)="onEdit()">Edit</button>
<button (click)="onCancel" (click)="onCancel()">Cancel</button>

明白了吗？如何申请您的方案？

我添加了一个简单的example here

希望能帮助到你。