Saya telah menambahkan tombol "Edit" di kisi tabel untuk setiap baris. Data untuk tabel berasal dari api dengan respons JSON berikut.

{ 
 Id: 1783
 total: 2
 trasfer: true
 Sizing: true
 name: "runner"
}

Saya mencoba menerapkan ketika pengguna mengklik tombol edit, layar baru muncul di mana orang dapat mengedit nilai baris itu. Sejauh ini saya telah menerapkan komponen yang diberikan tombol dan memberi peringatan saat tombol diklik. Bagaimana saya bisa mengimplementasikan router ke layar baru bersama dengan data yang dapat diedit dari baris tertentu.

Demo: https://ag-grid2.zoltanhalasz.net/

button-renderer.component.ts

@Component({
  selector: 'app-button-renderer',
  template: `
    <button type="button" (click)="onClick($event)">{{label}}</button>
    `
})
export class ButtonRendererComponent implements ICellRendererAngularComp { 
    afterGuiAttached?(params?: import("ag-grid-community").IAfterGuiAttachedParams): void {
        return;
    }  
    ngAfterViewInit(): void {
        return;
    }
  public params;
  label: string;

  constructor(){}
  
  agInit(params: ICellRendererParams): void {
    this.params = params;
    this.label = this.params.label || null;
}
  refresh(params: any): boolean {
    return false;
}

public onClick(event) {
    this.params.data[this.params.colDef.field] = event.checked;

    if (typeof this.params.context.componentParent.notifyCellUpdate === "function"){
        this.params.context.componentParent.CellUpdate(this.params);
    }
    
 }
}

app.component.ts

       columnDef = [   {
            headerName: 'Button',     field : 'changeSettings',     
            cellRenderer: 'buttonRenderer',
            cellStyle: {'text-align': 'center'},
            cellRendererParams: {
              label: 'Open'
            }
          } ]

 CellUpdate(params){
      
        if (params.colDef.field === "changeSettings"){
            alert("Notified Button Clicked");
   
        }
    }
0
user273181 12 Mei 2021, 06:04

1 menjawab

Jawaban Terbaik

Buat komponen dan navigasikan ke sana dengan data input. Ada banyak cara untuk mengubah data antar komponen.

Baca artikel ini

Dalam demo sampel Anda, Anda harus menentukan rute dengan id dan menavigasi ke komponennya lalu memanggil api untuk mengambil data.

Anda juga dapat membuka modal untuk menampilkan data sebagai gantinya. Contoh:

 CellUpdate(params){
      
        if (params.colDef.field === "changeSettings"){
          const modalRef = this.modalService.open(YourEditComponent);
          modalRef.componentInstance.data= params;   
        }
    }
0
Saghi Shiri 12 Mei 2021, 05:23