Как добавить встроенную кнопку редактирования и удаления вместе с новой кнопкой в ​​прайм нг для приложений angular2 - PullRequest
Новая
       5

Как добавить встроенную кнопку редактирования и удаления вместе с новой кнопкой в ​​прайм нг для приложений angular2

0 голосов
/ 24 мая 2018

У меня есть страница, которая имеет только одну пользовательскую вещь.Но теперь мне нужно создать таблицу, и мне нужно получить данные, чтобы в таблице у меня была встроенная кнопка редактирования и удаления.Если я нажимаю кнопку редактирования, то я должен иметь возможность редактировать всю строку, удаление означает, что вся строка должна быть удалена.И когда я нажимаю кнопку «Создать», она должна создать новую строку с действиями редактирования и удаления.Мне нужно выполнить это, используя сам нг-премьер.Итак, кто-нибудь может мне помочь с ссылками или любой демонстрацией.

1 Ответ

0 голосов
/ 24 мая 2018

Вы можете использовать [editable]="true"

С Официальная ссылка на документацию :

Редактирование Incell включено путем установки свойства true редактирования как для данных, так и для столбцов.Нажатие на ячейку переключает в режим редактирования и нажатие клавиши ввода или нажатие на другую ячейку переключает ее обратно в режим просмотра.

Компонент: 

    import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  data: any = [];
  delRow;

  editRow(row) {
        this.data.filter(row => row.isEditable).map(r => { r.isEditable = false; return r })
    row.isEditable = true;
  }

  save(row){
    row.isEditable = false
  }

  addNew(){
    this.data.push({
      name: '',
      value: ''
    })
  }

  delete(row){
      console.log(row);
      this.delRow = this.data.indexOf(row);
      this.data.splice(this.delRow,1);
      console.log(this.data);

  }

  getData() {    
    this.data = [
      {name: "Name1", value: "value1"},
      {name: "Name2", value: "value2"},
      {name: "Name3", value: "value3"},
      {name: "Name4", value: "value4"}
      ];
      this.data.map(row => {      
        row.isEditable = false;        
      });    

  };


}

HTML: 

 <button (click)="getData()">Load Data</button>
<button (click)="addNew()">Add New</button>

<p-dataTable [immutable]="false" [value]="data" [editable]="true">
    <p-column field="name" header="Name">
      <ng-template let-row="rowData" pTemplate="body">
        <div *ngIf="!row.isEditable">{{row.name}}</div>
        <div *ngIf="row.isEditable">
          <input type="text" [(ngModel)]="row.name">
        </div>
    </ng-template>
    </p-column>
    <p-column field="value" header="Value">
      <ng-template let-row="rowData" pTemplate="body">
        <div *ngIf="!row.isEditable">{{row.value}}</div>
        <div *ngIf="row.isEditable">
          <input type="text" [(ngModel)]="row.value">
        </div>
    </ng-template></p-column>    

    <p-column field="" header="" [style]="{'text-align':'center'}">
      <ng-template let-row="rowData" pTemplate="body">
        <button (click)="editRow(row)">Edit</button>
      </ng-template>
    </p-column>
    <p-column field="" header="" [style]="{'text-align':'center'}">
      <ng-template let-row="rowData" pTemplate="body">
        <button (click)="save(row)">Save</button>
      </ng-template>

    </p-column>
     <p-column field="" header="" [style]="{'text-align':'center'}">
      <ng-template let-row="rowData" pTemplate="body">
        <button (click)="delete(row)">Delete</button>
      </ng-template>


    </p-column>
</p-dataTable>

Вот РАБОЧИЙ ДЕМО

...