我正在尝试更新Angular6网络应用中的团队成员 . 我创建了一个模式来选择要从团队中删除的成员 . 然后单击“提交”，它将调用该服务以将其从数据库中的团队中删除 . 如果成功，则代码将从本地成员帐户列表中删除该成员，并将更新的列表发送到父组件 . 然后它返回到团队页面，但它仍然显示成员列表中已删除的成员 . 当我刷新页面时，它会从列表中删除该成员，但这是因为它正在再次调用服务器并重新填充成员列表 .

这是Account类：

/**
 * Model for client-side accounts.
 */
export class Account {
  email: string;
  password: string;
  firstName: string;
  lastName: string;
  isDeleted: boolean;
}

这是子组件'remove-member.component'上按钮的html：

<div id="removeMemberModal" class="modal">
...
  <div class="modal-footer">
      <button type="button" class="btn btn-primary" (click)="removeMember()" data-dismiss="modal">
        Submit
      </button>
      <button type="button" class="btn btn-secondary" data-dismiss="modal">
        Cancel
      </button>
  </div>
</div>

这是子组件打字稿文件：

@Component({
  selector: 'app-remove-member',
  templateUrl: './remove-member.component.html',
  styleUrls: ['./remove-member.component.css']
})
export class RemoveMemberComponent implements OnInit {
  public email;
  @Input() teamId: number;
  @Input() accounts: Account[];
  @Output() updatedAccounts = new EventEmitter<Account[]>();

  constructor(private teamService: TeamService) { }

  ngOnInit() {
  }

  removeMember() {
    this.teamService.removeTeamMember(this.teamId, this.email)
      .subscribe(() => {
        var index = this.accounts.indexOf(this.email);
        if(index > -1) {
          this.accounts.splice(index, 1);
        }
        this.updatedAccounts.emit(this.accounts);
      }, (err) => {
        console.log(err);
      });
  }

  getEmail(email: string) {
    this.email = email;
    console.log("email = ", email);
  }
}

这是相关的父组件html：

<!-- This displays the member list -->
<ul class="list-group">
  <button class="btn btn-info btn-sm" [hidden]="!isMemberOfTeam()" data-toggle="modal" data-target="#inviteMember">+ Invite</button>
  <div class="list-group-item list-group-item-action flex-column align-items-start" *ngFor="let account of accounts">
    <div class="d-flex justify-content-between">
      <h5 class="mb-1"><a (click)="getRoute(account.email)">{{ account.firstName }} {{ account.lastName }}</a></h5>
    </div>
    <p class="mb-1">{{ account.email }}</p>
  </div>
</ul>
...
<!-- Child component modal -->
<li class="list-inline-item">
    <a class="nav-link" href="#" data-toggle="modal" data-target="#removeMemberModal">
      Remove Member
    </a>
</li>
...
<app-remove-member [teamId]="team.id" [accounts]="accounts" (updatedAccounts)="onAccountsUpdated($event)"></app-remove-member>

这是相关的父组件打字稿代码

export class TeamInfoComponent implements OnInit {
  public team: Team;
  public accounts: Account[] = [];
  public lastWeeksMetrics: number;
  public thisWeeksMetrics: number;
  public toAuthorize: AddUserRequest[] = [];

...

  /**
  * Updates the account members list (DOESN'T UPDATE MEMBER LIST DISPLAYED)
  * @param updatedAccounts The updated account information
  */
  onAccountsUpdated(updatedAccounts: Account[]) {
    this.accounts = updatedAccounts;
  }
...
}

我发现类似问题的所有其他帖子似乎只是父组件和子组件之间的连接问题，就像他们没有使用正确的组件选择器一样，而且我相信这不是问题，但也许我错了 . 谢谢 .

angular6 angular-event-emitter