Angular 5中Ngx Modal与表格数据交互问题咨询

嘿，作为Angular新手碰到这种组件间数据传递的问题完全正常！我来一步步帮你实现点击编辑按钮传数据到模态框，以及编辑完成后把更新数据传回表格的功能～

一、先把行数据传入模态框 #

首先假设你已经把编辑模态框做成了一个独立的子组件（比如叫BookEditModalComponent），咱们分两步来：

1. 父组件（fetch-data.component）准备数据和控制逻辑 #

在fetch-data.component.ts里，定义变量存储当前选中的图书和模态框状态：

import { Component } from '@angular/core';
// 假设你的图书类型是这样的
interface Book {
  id: number;
  title: string;
  author: string;
  // 其他字段...
}

@Component({
  selector: 'app-fetch-data',
  templateUrl: './fetch-data.component.html'
})
export class FetchDataComponent {
  books: Book[] = []; // 表格的图书列表
  selectedBook: Book | null = null;
  isModalOpen = false;

  // 模拟从接口获取数据
  ngOnInit() {
    this.books = [
      { id: 1, title: 'Angular实战', author: '张三' },
      { id: 2, title: 'TypeScript入门', author: '李四' }
    ];
  }

  // 点击编辑按钮触发的方法
  openEditModal(book: Book) {
    // 这里最好传一个副本，避免编辑时直接修改原数据（取消编辑也会改）
    this.selectedBook = { ...book };
    this.isModalOpen = true;
  }
}

2. 父组件模板绑定数据到模态框 #

在fetch-data.component.html里，表格的编辑按钮绑定点击事件，同时把模态框组件加进来，通过@Input传递选中的图书和模态框状态：

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>书名</th>
      <th>作者</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let book of books">
      <td>{{ book.id }}</td>
      <td>{{ book.title }}</td>
      <td>{{ book.author }}</td>
      <td>
        <button (click)="openEditModal(book)">编辑</button>
      </td>
    </tr>
  </tbody>
</table>

<!-- 编辑模态框组件 -->
<app-book-edit-modal
  [book]="selectedBook"
  [isOpen]="isModalOpen"
  (closeModal)="isModalOpen = false"
  (bookUpdated)="onBookUpdated($event)"
></app-book-edit-modal>

3. 子组件（BookEditModalComponent）接收数据 #

在子组件的book-edit-modal.component.ts里，用@Input接收父组件传过来的图书和模态框状态：

import { Component, Input, Output, EventEmitter } from '@angular/core';
import { Book } from '../fetch-data/fetch-data.component';

@Component({
  selector: 'app-book-edit-modal',
  templateUrl: './book-edit-modal.component.html'
})
export class BookEditModalComponent {
  @Input() book: Book | null = null;
  @Input() isOpen = false;
  @Output() closeModal = new EventEmitter<void>();
  @Output() bookUpdated = new EventEmitter<Book>();

  // 保存编辑后的图书
  saveBook() {
    if (this.book) {
      this.bookUpdated.emit(this.book); // 把更新后的数据传给父组件
      this.closeModal.emit(); // 关闭模态框
    }
  }

  // 取消编辑
  cancelEdit() {
    this.closeModal.emit();
  }
}

子组件模板（book-edit-modal.component.html）里，用*ngIf控制显示，同时绑定图书的表单字段：

<div class="modal" *ngIf="isOpen">
  <div class="modal-content">
    <h3>编辑图书</h3>
    <div *ngIf="book">
      <label>书名：</label>
      <input type="text" [(ngModel)]="book.title">
      <label>作者：</label>
      <input type="text" [(ngModel)]="book.author">
      <!-- 其他字段... -->
    </div>
    <button (click)="saveBook()">保存</button>
    <button (click)="cancelEdit()">取消</button>
  </div>
</div>

二、把更新后的数据传回表格 #

这一步通过子组件的@Output事件发射器来实现，父组件监听这个事件，然后更新表格的图书列表：

在fetch-data.component.ts里添加处理更新的方法：

// 处理模态框传回的更新数据
onBookUpdated(updatedBook: Book) {
  // 找到原列表中对应的图书，替换成更新后的数据
  const index = this.books.findIndex(b => b.id === updatedBook.id);
  if (index !== -1) {
    this.books[index] = updatedBook;
    // 如果用的是响应式表单或者需要触发变更检测，可能需要重新赋值数组
    // this.books = [...this.books];
  }
  this.selectedBook = null; // 清空选中的图书
}

这样，当你在模态框里编辑完点击保存，更新后的数据就会传回父组件，父组件找到对应的行替换数据，表格就会自动更新啦！

额外小提示 #

• 如果你不想把模态框做成独立组件，也可以直接在父组件模板里写模态框，这样直接用父组件的selectedBook变量就行，不用@Input/@Output，但做成独立组件更符合Angular的组件化思想哦～
• 编辑时传递数据副本很重要，不然你在模态框里输入内容时，表格里的原数据会实时跟着变，体验不好。用扩展运算符{ ...book }或者Object.assign({}, book)都可以创建副本。

内容的提问来源于stack exchange，提问作者Vlad