Question

我是角度5的新手（并且有角度），所以我有一些问题。我想在表格中处理我的数据（书籍），当用户按下编辑按钮时，将所选行的数据发送到编辑模式窗口并打开它。编辑关闭模态窗口并将更新的数据发送回表格后。

问题：

如何将数据从行发送到模态窗口？（每行都有自己的编辑按钮）。
如何将更新后的数据发回表格？

代码：

取-data.component.ts

import { Component, Inject, TemplateRef } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
import { ReactiveFormsModule, FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
import { Http, Headers, Response, RequestOptions, RequestMethod } from '@angular/http';
@Component({
  selector: 'app-fetch-data',
  templateUrl: './fetch-data.component.html'
})
export class FetchDataComponent {
  http: any;
  public books: Book[];
  public genres: Genre[];
  modalRef: BsModalRef;
  bookForm: FormGroup;
  public submitted: boolean;
  constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string, private modalService: BsModalService, private fb: FormBuilder) {
    this.http = http;//test
    http.get<Book[]>(baseUrl + 'api/Book/GetAllBooks').subscribe(result => {
      this.books = result;
    }, error => console.error(error));
    http.get<Genre[]>(baseUrl + 'api/Book/GetAllGenres').subscribe(result => {
      this.genres = result;
    }, error => console.error(error));
  }
  public openModal(template: TemplateRef<any>) {
    this.modalRef = this.modalService.show(template);
  }
  public createForm() {
    this.bookForm = this.fb.group({
      name: ['', Validators.required],
      publisher: '',
      pages: '',
      genre: ''
    });
  }
  onSubmit({ value, valid }: { value: Book, valid: boolean }) {
    this.submitted = true;
    console.log(value);

    let body = JSON.stringify(value);

    console.log(body);

    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });

    return this.http.post('/api/referer/insert', body, options).subscribe();
  }
}

interface Book {
  bookName: string;
  publisher: number;
  pages: number;
  genre: Genre;
}

interface Genre {
  genreId: number;
  genreName: string;
}

取-data.component.html

<h1>Books</h1>
<p>This component demonstrates books</p>

<p *ngIf="!books"><em>Loading...</em></p>

<table class='table' *ngIf="books">
  <thead>
    <tr>
      <th>Book Name</th>
      <th>Publisher</th>
      <th>Pages</th>
      <th>Genre</th>
      <th>Edit</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let book of books">
      <td>{{ book.bookName }}</td>
      <td>{{ book.publisher }}</td>
      <td>{{ book.pages }}</td>
      <td>{{ book.genre.genreName }}</td>
      <td><button class="btn btn-warning" (click)="openModal(template)">Edit</button></td>
    </tr>
  </tbody>
</table>

<ng-template #template>
  <div class="modal-header">
    <h4 class="modal-title pull-left">Edit Window</h4>
    <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <h2>Book Editor</h2>
    <form  [formGroup]="bookForm" (ngSubmit)="onSubmit(bookForm, bookForm.isValid)" >
      <div class="form-group">
        <label class="center-block">
          Name:
          <input class="form-control" formControlName="name" placeholder="Name">
        </label>
      </div>
      <div class="form-group">
        <label class="center-block">
          Publisher:
          <input class="form-control" formControlName="publisher" placeholder="Publisher">
        </label>
      </div>
      <div class="form-group">
        <label class="center-block">
          Pages:
          <input class="form-control" formControlName="pages" placeholder="Pages">
        </label>
      </div>
      <div class="form-group">
        <label class="center-block">
          Genre:
          <select class="form-control" formControlName="genre">
            <option *ngFor="let genre of genres" [value]="genre">{{genre}}</option><!--mb value i should change-->
          </select>
        </label>
      </div>
    </form>

    <button class="btn btn-success" type="submit">Edit</button>
    <button class="btn btn-danger" (click)="modalRef.hide()">Back to List</button>

    {{bookForm.value | json }}
  </div>

</ng-template>

ngx模态使用数据

0 个答案: