angular6 - EventEmitter が Angular 6 の親コンポーネントの配列を更新しない

Question

Angular6 Web アプリでチームのメンバーを更新しようとしています。チームから削除するメンバーを選択するためのモーダルを作成しました。次に、送信をクリックすると、サービスが呼び出され、データベースのチームから削除されます。それが成功した場合、コードはローカル メンバー アカウント リストからメンバーを削除し、更新されたリストを親コンポーネントに発行します。その後、チーム ページに戻りますが、削除されたメンバーがメンバー リストに表示されたままです。ページを更新すると、リストからメンバーが削除されますが、それはサーバーに別の呼び出しを行い、メンバー リストを再作成するためです。

これは 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>

子コンポーネントの typescript ファイルは次のとおりです。

@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>

そして、ここに関連する親コンポーネントの typescript コードがあります

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

同様の質問で見つけた他のすべての投稿は、適切なコンポーネントセレクターを使用していなかったように、親コンポーネントと子コンポーネント間の単なる接続の問題であるように見えます.間違っています。ありがとうございました。