O que é CRUD

    CRUD é um acrônimo em programação de computadores que significa as operações CREATE, READ, UPDATE, DELETE que podem ser executadas em uma coleta de dados. No mundo da computação, falar sobre aplicativos CRUD é a principal diferença em comparação com os aplicativos que fornecem dados somente leitura aos usuários.

    Angular LIXO

    Ao falar sobre Angular operações CRUD ou CRUD no Angular, é importante observar que o armazenamento de dados está em um servidor remoto. O aplicativo Angular não pode acessar diretamente a camada de dados, portanto, ele precisa se comunicar com ele por meio de uma API Web que fornece endpoints para as operações CRUD, ou seja:

    API Operação Métodos HTTP
    "API/entidades" LER todas as entidades OBTER
    "api/entidades/id" LEIA a entidade com o id correspondente OBTER
    "api/entidades/atualização" UPDATE a entidade com o id correspondente COLOCAR / PATCH
    "api/entidades/criar" CRIAR uma nova entidade POSTAR
    "api/entidades/excluir" DELETE a entidade com o id correspondente EXCLUIR

    Observe que as operações CRUD também são mapeadas conceitualmente para os métodos HTTP usados para se comunicar com APIs por HTTP.

    Todo o código que funcionará com a API mencionada acima pode ser abstraído em um serviço Angular. Esse serviço é injetável e pode ser reutilizado por qualquer componente que precise executar operações CRUD no mesmo banco de dados. Uma boa prática é escrever esse serviço o mais genérico possível, tornando-o adequado para ser reutilizado em muitos componentes e também em servidores diferentes.

    Um exemplo genérico desse serviço será semelhante a este:

    @Injectable()
export class CRUDService {
  /** See https://angular.io/api/common/http/HttpClient */
  constructor(private http: HttpClient) { }

  /** Gets all entities from server */
  public getData() {
      return this.http.get(`${this.serverURL}\api\entities`);
  }

  /** Gets entity with corrresponding id */
  public getRecord(id) {
      return this.http.get(`${this.serverURL}\api\entities\${id}`);
  }

  /** Creates entity from body */
  public add(entity) {
      return this.http.post(`${this.serverURL}\api\entities\create`, entity);
  }

  /* Updates entity with data from body */
  public update(entity) {
      return this.http.put(`${this.serverURL}\api\entities\update`, entity);
  }

  /** Deletes the corresponding entity */
  public delete(entity) {
      return this.http.delete(`${this.serverURL}\api\entities\delete`, entity);
  }
}

    O que falta no serviço acima é a configuração para filtragem/classificação/paginação, etc. Dependendo da implementação exata da API dos pontos de extremidade, as solicitações para o servidor podem precisar de parâmetros opcionais para lidar com filtragem/classificação/paginação para você. Consulte nossas Operações de Dados Remotos para demonstrações acompanhadas de exemplos de código.

    Para obter mais exemplos e diretrizes, consulte o tutorial de Serviços HTTP na documentação oficial do Angular.

    Operações CRUD com Grid

    Habilitar o CRUD na grade significa fornecer interface do usuário para que os usuários executem essas operações CRUD de dentro da grade. Isso é muito fácil - a grade fornece edição de células, edição de linha,​ ​adição de linha e interface do usuário de exclusão de linha pronta para uso e API poderosa para fazer isso por conta própria. Em seguida, queremos pegar o resultado de cada ação de edição e comunicá-lo ao método correspondente em nosso serviço CRUD, preservando assim todas as alterações no banco de dados original. Ao concluir isso, podemos dizer que a grade está habilitada para CRUD.

    Esta seção foi escrita como um tutorial de instruções sobre como habilitar operações CRUD no Grid, acompanhada por trechos de código que você pode pegar e copiar e colar em seu código.

    How to

    Vamos primeiro habilitar o comportamento rowEditing, trazer a interface do usuário que precisamos para as ações de edição, beneficiando-se do IgxActionStrip (veja mais sobre o IgxActionStrip), e anexar manipuladores de eventos:

    <igx-grid 
    primaryKey="ID"
    [rowEditable]="true"
    (rowAdded)="rowAdded($event)"
    (rowDeleted)="rowDeleted($event)"
    (rowEditDone)="rowEditDone($event)">

  <igx-action-strip #actionstrip>
      <igx-grid-editing-actions [addRow]="true"></igx-grid-editing-actions>
  </igx-action-strip>

    No componente Angular, injete o serviço de dados usando DI. Agora estamos prontos para usar o serviço para fazer operações CRUD completas em nossa camada de dados:

    constructor(private crudService: CRUDService) { }

public rowDeleted(event: IRowDataEventArgs) {
    this._crudService.delete(event.data).subscribe((rec) => {
        // notification or do any adittional handling
        this.snackbar.open(`Row with ID of ${rec.ID} was deleted.`);
    });
}

public rowAdded(event: IRowDataEventArgs) {
    this._crudService.add(event.data);
}

public rowEditDone(event: IGridEditDoneEventArgs) {
    this._crudService.update(event.newValue);
}

    No exemplo acima, chamamos apenas os métodos correspondentes e passamos os dados que são lidos dos argumentos do evento. A maioria dos endpoints de API retornará a entidade atualizada/adicionada/excluída, o que indica que a solicitação foi bem-sucedida.

    Uma boa prática é adicionar validação, notificando os usuários de que todas as ações foram concluídas com sucesso ou que ocorreu um erro. Nesse caso, você pode querer passar manipuladores para o erro e concluir as notificações também:

    this._crudService.delete(event.data).subscribe({
    next: (data: any) => {
      console.log('success');
    },
    error: err => {
      console.log(err);
    },
    complete: () => {
      console.log('Complete notification')
    }
});
    Note

    Os exemplos acima são baseados na interface do usuário de grade padrão para ações de edição. Outra abordagem válida é se você fornecer sua própria interface do usuário externa. Nesse caso, responder às interações do usuário com a interface do usuário deve funcionar com a API de edição de grade (verifique se a grade tem um primaryKey definido). Consulte a seção API para referência.

    Note

    Certifique-se de seguir as práticas recomendadas e evitar diferenças nos dados locais em comparação com o banco de dados do servidor. Por exemplo - você pode decidir primeiro fazer uma solicitação ao servidor para excluir um registro, mas se a solicitação falhar, não exclua os dados nos dados da grade local:

    this._crudService.delete(event.data).subscribe({
    next: (data: any) => {
      this.grid.getRowByKey(event.data[this.grid.primaryKey]).delete();
    },
    error: err => {
      console.log(err); // notify and don't delete the grid row
    }
});

    Demo

    Veja a demonstração que foi criada seguindo as diretrizes. Brinque com ele e experimente os exemplos de personalização para se adequar ao seu cenário da melhor maneira possível.

    Personalizações

    A rica API de grade permite que você personalize o processo de edição de praticamente qualquer maneira para atender às suas necessidades. Isso inclui, mas não se limita a:

    • Edição em lote: Ative a edição em lote para agrupar todas as atualizações e confirmar tudo com uma única solicitação.
    • Modelagem: adicione modelos para edição de células ou use sua própria interface do usuário externa para edição de linhas/células, adição e exclusão de linhas.
    • Eventos: Monitore o fluxo de edição e reaja de acordo. Anexar manipuladores de eventos para todos os eventos emitidos durante a edição, permitirá que você faça:
      • validação de dados por célula
      • Validação de dados por linha
      • Solicitar ao usuário o tipo esperado de entrada
      • cancelar o processamento posterior, com base nas regras de negócios
      • Confirmação manual das alterações
    • API avançada

    Edição em lote

    • Habilite a Edição em Lote para manter suas atualizações no cliente e confirme todas elas com uma única solicitação. A atualização em lote é habilitada poropção de configuração batchEditing como true:
    <igx-grid [batchEditing]="'true'" ...>

    Vá para Edição em lote para obter mais detalhes e exemplos de demonstração.

    Modelos

    Você pode ver e saber mais sobre os modelos de edição de célula padrão no tópico geral de edição.

    Se você quiser fornecer um modelo personalizado que será aplicado quando uma célula estiver no modo de edição, você pode usar a igxCellEditor diretiva. Para fazer isso, você precisa passar por uma ng-template marcação com a igxCellEditor diretiva e vincular corretamente seu controle personalizado ao cell.editValue:

    <igx-column field="class" header="Class" [editable]="true">
    <ng-template igxCellEditor let-cell="cell" let-value>
        <igx-select class="cell-select" [(ngModel)]="cell.editValue" [igxFocus]="true">
            <igx-select-item *ngFor="let class of classes" [value]="class">
                {{ class }}
            </igx-select-item>
        </igx-select>
    </ng-template>
</igx-column>

    Para obter mais informações e demonstrações, consulte o tópico Edição de células.

    Eventos

    A grade expõe uma ampla variedade de eventos que fornecem maior controle sobre a experiência de edição. Esses eventos são disparados durante o ciclo de vida de edição de linha e edição de célula- ao iniciar, confirmar ou cancelar a ação de edição.

    Acontecimento Descrição Argumentos Cancelável
    rowEditEnter SerowEditing estiver ativado, será acionado quando uma linha entrar no modo de edição IGridEditEventArgs true
    cellEditEnter Acionado quando uma célula entra no modo de edição (depoisrowEditEnter) IGridEditEventArgs true
    cellEdit Se o valor for alterado, será acionado imediatamente antes de o valor de uma célula ser confirmado (por exemplo, pressionandoEnter) IGridEditEventArgs true
    cellEditDone Se o valor for alterado, será acionado depois que uma célula tiver sido editada e o valor da célula for confirmado IGridEditDoneEventArgs false
    cellEditExit Acionado quando uma célula sai do modo de edição IGridEditDoneEventArgs false
    rowEdit SerowEditing estiver ativado, é acionado logo antes de uma linha no valor do modo de edição ser confirmado (por exemplo, clicando noDone botão na sobreposição de edição de linha) IGridEditEventArgs true
    rowEditDone SerowEditing estiver ativado, será acionado depois que uma linha tiver sido editada e o valor da nova linha tiver sido confirmado. IGridEditDoneEventArgs false
    rowEditExit SerowEditing estiver ativado, será acionado quando uma linha sair do modo de edição IGridEditDoneEventArgs false

    Acesse Eventos para obter mais detalhes e exemplos de demonstração.

    Editing API

    A atualização de dados na grade é obtida por meio de métodos expostos pela grade:

    e update método exposto pelas instâncias IgxGridCell e IgxGridRow:

    // Through the grid methods
this.grid.updateRow(newData, rowKey);
this.grid.updateCell(newData, rowKey, columnField);
this.grid1.deleteRow(0);
this.grid.addRow(data);

// Through the methods exposed by cell/row
this.grid.getCellByColumn(rowIndex, columnField).update(newData);
this.grid.getCellByKey(rowKey, columnField).value = newData;
this.grid.getRowByKey(rowID).update(newData);
this.grid.getRowByKey(rowID).delete();

    Mais detalhes e informações sobre como usar a API de grade podem ser encontrados na seção Operações CRUD de edição de células.

    Takeaway

    Habilitar o CRUD de maneira robusta é um marco importante para qualquer aplicativo orientado a dados. Para agilizar todo o processo, construímos o IgxGrid com os recursos CRUD em mente, fornecendo interface de usuário pronta para uso e APIs flexíveis. Como isso vai beneficiar você? Isso economizará muito tempo ao implementar o CRUD em qualquer banco de dados existente. E quando falamos sobre aplicativos modernos orientados por dados, tudo se resume a robustez, velocidade e flexibilidade.

    Referências de API