Угловая передача данных kendoGrid с нуля на бэкэнд - PullRequest
Новая
       16

Угловая передача данных kendoGrid с нуля на бэкэнд

0 голосов
/ 03 июля 2018

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

Я сделал эти шаги:

  1. Я сделал component.html с помощью kendoGrid 

<base href="/">
<br />
<div class="form-group">
  <label>List of books</label>
</div>
<!--<ng-template #readOnlyTemplate let-books>-->
<kendo-grid [data]="books"
            [height]="420"
            (edit)="editHandler($event)" (cancel)="cancelHandler($event)"
            (save)="saveHandler($event)" (remove)="removeHandler($event)"
            (add)="addHandler($event)"
            [navigable]="true"
            (dataStateChange)="onStateChange($event)"
            [kendoGridReactiveEditing]="createFormGroup">
  <ng-template kendoGridToolbarTemplate>
    <button kendoGridAddCommand type="button">Add new</button>
  </ng-template>
  <kendo-grid-column field="genreID" title="Genre" width="70">
    <ng-template kendoGridEditTemplate let-dataItem="books">
      <input [(ngModel)]="books.genreID" kendoGridFocusable name="genreID" class="k-textbox" type="number" required />
    </ng-template>
  </kendo-grid-column>
  <kendo-grid-column field="bookName" title="Name" width="120">
    <ng-template kendoGridEditTemplate let-dataItem="books">
      <input [(ngModel)]="books.bookName" kendoGridFocusable name="bookName" class="k-textbox" required />
    </ng-template>
  </kendo-grid-column>
  <kendo-grid-column field="yearOfPublish" title="Year">
    <ng-template kendoGridEditTemplate let-dataItem="books">
      <input [(ngModel)]="books.yearOfPublish" kendoGridFocusable name="yearOfPublish" class="k-textbox" type="number" min="876" max="2018" required />
    </ng-template>
  </kendo-grid-column>
  <kendo-grid-command-column title="Action" width="220">
    <ng-template kendoGridCellTemplate let-isNew="isNew">
      <button kendoGridEditCommand type="button" [primary]="true">Edit</button>
      <button kendoGridRemoveCommand type="button">Remove</button>
      <button kendoGridSaveCommand type="button">
        {{ isNew ? 'Save' : 'Update' }}
      </button>
      <button kendoGridCancelCommand type="button">{{ isNew ? 'Discard changes' : 'Cancel' }}</button>
    </ng-template>
  </kendo-grid-command-column>

</kendo-grid>

<br />
  1. Я сделал component.ts с add логикой 

export class BookListComponent implements OnInit {

  public books: Book[] = [];

  private editedRowIndex: number;
  private book: Book;

  public formGroup: FormGroup;

  public gridState: State = {
    sort: [],
    skip: 0,
    take: 10
  };

  constructor(private dataService: DataBookService, private formBuilder: FormBuilder) {
    this.createFormGroup = this.createFormGroup.bind(this);
  }

  ngOnInit() {
    this.load();
  }

  public onStateChange(state: State) {
    this.gridState = state;
    debugger;

    this.load();
  }

  load() {
    this.dataService.getBooks().subscribe(data => {
      this.books = data;
    });
    console.log("Startup entity must be here");

  }

  addHandler({ sender}) {
    sender.addRow(this.createFormGroup(new Book()))
  }

  public saveHandler({ sender, rowIndex, dataItem, isNew }) {
    if (isNew) {

      dataItem = this.formGroup.value;

      this.dataService.save(dataItem, isNew);
     
      sender.closeRow(rowIndex);
    }
    if (!isNew) {
      this.dataService.updateBook(dataItem);
        
      sender.closeRow(rowIndex);
    }

  }

  public createFormGroup(args: any): any {
    const item = args.isNew ? new Book() : args.dataItem;
    //debugger;
    this.formGroup = this.formBuilder.group({ 
      //'BookID': item.bookID,
      'bookName': [item.bookName, Validators.required],
      'genreID': item.genreID,
      'yearOfPublish': [item.yearOfPublish, Validators.compose([Validators.required, Validators.pattern('^[0-9]{1,3}')])]
    });

    return this.formGroup;
  }
}
  1. Отправка результатов работы компонента службе, которая отправляет его в ASP.NET Core Controller: 

export class DataBookService extends BehaviorSubject<any[]> {
  private url = 'http://localhost:49403/api/Book';

  private data: any[] = [];

  constructor(private http: HttpClient) {
    super([]);
  }

  getBooks(): Observable<Book[]> {
    var result = this.http.get<Book[]>(this.url + '/getAll');
    return result;
  }
  getBook<Book>(id: number) {
    return this.http.get(this.url + '/get' + id);
  }
  createBook<Book>(book: Book): Observable<Book> {
    return this.http.post<Book>(this.url + "/create", book).toPromise();
  }
  public save(data: Book, isNew?: boolean) {

    if (isNew) {
      this.createBook(data);
    }
    if (!isNew) {
      this.updateBook(data);
      console.log("updated");
    }
    this.reset();
  }
  private reset() {
    this.data = [];
  }

Проблема в том, что у меня есть пустой dataItem из component.html, и я понятия не имею, почему? enter image description here

EDIT

Так как я использую формы реактивные редактирование и пытаюсь создать форму, когда нажимаю «Добавить», функция createFormGroup (args) сообщает, что

Тип «FormGroup» нельзя назначить типу «Book». Свойство bookID отсутствует в типе FormGroup.

Почему это может быть?

РЕДАКТИРОВАТЬ 2

Я обнаружил, что информация из моих входных данных содержится в _currentView в core.js, вот скриншот введите описание изображения здесь

...