Блог

Я использую angular для операции 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. Когда мы нажимаем на редактировать, нам нужно показать кнопку СОХРАНИТЬ и ОТМЕНИТЬ

4. Когда мы нажимаем на создать, нам нужно показать кнопку СОЗДАТЬ и ОТМЕНИТЬ

5. А для просмотра видна только кнопка ОТМЕНЫ

Проблема:-

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

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

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

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

Как я могу написать логику для редактирования и просмотра? Кто-нибудь может мне помочь??

** ФОРМА 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>
 

КОМПОНЕНТ ФОРМЫ.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']);
    }
 

Один из способов сделать это — использовать флаги, свойства, которые можно использовать для изменения поведения на основе взаимодействия с пользователем.

Каждый раз, когда пользователь нажимает кнопку, вы знаете, каковы намерения пользователя, поэтому вы можете включать / отключать элементы или отображать / скрывать на основе этого.

В этом сценарии вы можете использовать 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>

 

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

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

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