2

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

这是帐户类：

/**
 * 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;
  }
...
}

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

4

0 回答 0