логика работы 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. Когда мы нажимаем на кнопку edit, нам нужно показать кнопку SAVE & CANCEL

4. Когда мы нажимаем на новое, нам нужно показать кнопку CREATE & CANCEL

5. И для просмотра, только Кнопка ОТМЕНА должна быть видимой

Проблема: -

Я использовал логику, которая, когда идентификатор передается из таблицы, затем сохраняется в переменной productCategoryIdToUpdate .

Затем, используя условие if else, я написал это,

IF (productCategoryIdToUpdate === null) затем выполните функцию CREATE. В противном случае сделайте функцию обновления.

Теперь мне нужно передать идентификатор для редактирования и просмотра. Из-за логики, которую я написал, такая же форма редактирования также отображается в форме 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>

Это ясно? Как применить к вашему сценарию?

Я добавил простой пример здесь

Надеюсь, это поможет.