Question

我在CRUD操作中使用了角度。

逻辑：-

我想使用表格列表，并希望以单一形式进行编辑，创建，查看方法。
对于表格，我将以下代码用于按钮。

表组件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>

下面是我的桌子。

enter image description here

单击“编辑”时，需要显示“保存并取消”按钮

enter image description here

点击新按钮时，我们需要显示创建和取消按钮

enter image description here

要查看，只有 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

希望有帮助。

CRUD操作的逻辑

1 个答案: