ngfor nicht korrekt aktualisiert in Kind-Komponente

Question

Meine Liste nicht korrekt aktualisiert, wenn ich es als eine Komponente verwenden, aber wenn ich die Vorlage direkt in den Eltern hinzufügen, funktioniert es gut. Hat jemand irgendwelche Vorschläge?

Wenn ich die Seite verlasse und zurückkomme, wird sie korrekt geladen und wenn ich console.log zum Abonnement in der Bankkontenliste-Komponente hinzufüge, wird es korrekt aktualisiert, wenn ich ein neues Bankkonto hinzufüge.

Dies ist das übergeordnete 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> 

dies ist die Komponente, die in der übergeordneten

@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; 
    });} 
} 

Weitere Informationen hinzugefügt: Ich füge neue Konten unter Verwendung einer dritten Komponente, die in einem modalen geladen wird. Es ruft eine Funktion auf 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(); 
    });} 
} 

ich die markForCheck zum abonnieren hinzugefügt und es funktioniert jetzt durch den vollständigen componant Baum und nicht nur auf den Eltern wie zuvor wurde hapening.