Question

我正在尝试更新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;
  }
...
}

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

EventEmitter无法更新Angular 6中父组件中的数组

0 个答案: