Angular 5：新增用户后如何通过重新调用API刷新兄弟组件表格

我来帮你搞定这个问题！核心问题在于你目前的双向绑定没有完全生效，导致父组件的users数据没有被正确更新，进而第二个组件拿不到最新数据。咱们一步步改：

1. 完善UserComponent的双向绑定逻辑 #

你在父组件模板里用了[(users)]="users"这种双向绑定语法，但UserComponent里只定义了@Input()，缺少对应的@Output()事件发射器，所以子组件更新users后没法通知父组件。

修改user.component.ts：

import { Output, EventEmitter } from '@angular/core';

export class UserComponent implements OnChanges {
  @Input() users: UserDto[];
  // 新增Output事件，名字必须是`[inputName]Change`才能配合双向绑定语法
  @Output() usersChange = new EventEmitter<UserDto[]>();
  displayedColumns = ['name', 'age'];
  dataSource = new MatTableDataSource<UserDto>();

  constructor(private _dialog: MatDialog, private _userService: UserService) {}

  ngOnChanges() {
    this.dataSource.data = this.users;
  }

  // 修正方法名笔误，和调用保持一致
  loadUsers() {
    this._userService.getUsers("../api/customers/")
      .subscribe((users: UserDto[]) => {
        this.users = users;
        this.dataSource.data = this.users;
        // 发射事件，通知父组件更新users数据
        this.usersChange.emit(users);
      })
  }

  openCreateUserDialog() {
    let dialogRef = this._dialog.open(AddUserComponent, { height: 'auto', width: '500px', disableClose: true })
    dialogRef.afterClosed().subscribe(result => {
      if (result === "cancel") {
        return;
      } else {
        this.loadUsers();
      }
    })
  }
}

2. 确保SecondComponent的更新逻辑可靠 #

你的SecondComponent里的ngOnChanges已经写了更新dataSource的逻辑，不过可以稍微优化一下初始化和判断，避免空值问题：

修改second.component.ts：

export class SecondComponent implements OnChanges {
  @Input() users: UserDto[];
  displayedColumns = ['is-approved', 'alias'];
  // 先空初始化数据源，避免组件初始化时users未传入导致的问题
  dataSource = new MatTableDataSource<UserDto>();

  constructor(private _dialog: MatDialog, private _userService: UserService){}

  ngOnChanges() {
    // 确保users存在再赋值，防止空指针
    if (this.users) {
      this.dataSource.data = this.users;
    }
  }
}

这样修改后，当你在UserComponent里新增用户并调用loadUsers获取最新数据时，会通过usersChange事件把新数据同步给父组件，父组件的users更新后会自动传递给SecondComponent，触发它的ngOnChanges方法更新数据源，表格就会实时刷新了，不用再手动刷新页面~

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