ngfor не корректно обновляется в дочернем компоненте

Question

Мой список не обновляется корректно, когда я использую его как компонент, но когда я добавляю шаблон непосредственно в родительский, он отлично работает. У кого-нибудь есть предложения?

Если я покину страницу и вернусь, она правильно загрузится , и когда я добавлю console.log к подписке в компоненте bankaccount-list, он обновится правильно, когда я добавлю новый банковский счет.

это родительский html.

<div class="card-block card-list"> 
    <search-box (update)="term = $event"></search-box> 
    <bankaccounts-list (update)="setSelectedBankAccount($event)"></bankaccounts-list> 
<!--template from below component entered here works, but when done like this it doesnt--> 
    </div> 

это компонент, который добавляется в родительском

@Component({ 
    selector: 'bankaccounts-list', 
    moduleId: module.id, 
    directives: [NgClass], 
    template: ` 
    <div class="list-group scroll-list"> 
    <div class="card" *ngFor="let bankAccount of bankAccounts> 
     <div class="card-header"> 
     {{bankAccount.name}} 
     </div> 
     <div class="card-block"> 
     {{bankAccount.description}}<br /> 
     </div> 
    </div> 
    </div> 
    ` 
}) 
export class BankAccountListComponent implements OnInit { 
    @Output() update = new EventEmitter(); 
    bankAccounts: any = []; 
    constructor(public userDetailsService: UserDetailsService) { 
    } 
    ngOnInit() { 
     this.userDetailsService.bankAccounts 
     .subscribe((data:any) => { 
     this.bankAccounts = data; 
    });} 
} 

Дополнительная информация: добавить новые учетные записи, используя третий компонент, который загружается в модальном. Это вызывает функцию на userDetailsService

private _bankAccounts: BehaviorSubject<any[]> = new BehaviorSubject(<any>[]); 
bankAccounts = this._bankAccounts.asObservable(); 

---

newBankAccount(acnt: any) { 
    let bank = this._bankAccounts.getValue(); 
    bank.push({ 
     'id': Math.floor((Math.random() * 50) + 1), 
     'name':acnt.name, 
     'description':acnt.desc, 
     'bankAccountName':acnt.acnt_name, 
     'bankAccountBsb':acnt.bsb, 
     'bankAccountNumber':acnt.num 
    }); 
    this._bankAccounts.next(bank); 
    } 

Answer 1

export class BankAccountListComponent implements OnInit { 
    @Output() update = new EventEmitter(); 
    bankAccounts: any = []; 
    constructor(private cd: ChangeDetectorRef, 
    public userDetailsService: UserDetailsService) { 
    } 
    ngOnInit() { 
     this.userDetailsService.bankAccounts 
     .subscribe((data:any) => { 
     this.bankAccounts = data; 
     this.cd.markForCheck(); 
    });} 
} 

Я добавил markForCheck на подписку и теперь он работает на основе полного componant дерева, а не только на родителей, как это было hapening раньше.