ngFor feuert nicht nach Update abhängig von der Variablen in Angular2

Question

Ich habe 2 Komponenten: CommandListComponent und CommandLineComponent. Innerhalb einer CommandListComponent Vorlage behandeln i ein Click-Ereignis auf einer Textzeichenfolge:

CommandListComponent Vorlage:

<li *ngFor="#command of commandList" class="b-command-list__command"><span (click)="checkCommand(command)" class="b-command-list__text">{{command}}</span></li>

commandlist.component.ts

import {CommandLineComponent} from "./commandline.component"; 
 

 
... 
 

 
export class CommandListComponent { 
 
    commandLineComponent: any; 
 

 
    constructor(private _commandLine: CommandLineComponent) { 
 
     this.commandLineComponent = _commandLine; 
 
    } 
 

 
    checkCommand(command: string): void { 
 
     this.commandLineComponent.add(command); 
 
    } 
 

 
}

Wenn click abgefeuert wird passieren i gewählte Befehl add Methode eines CommandLineComponent:

export class CommandLineComponent { 
 
    commands: string[] = []; 
 

 
    add(command: string): void { 
 
     if (command) this.commands.push(command); 
 
     console.log(this.commands); 
 
    } 
 
}

Und innerhalb einer Vorlage eines CommandLineComponent i eine Liste eines Kommandos drucken mit * ngFor:

<li *ngFor="#command of commands" class="b-command-textarea__command">{{command}}</li>

Aber * ngFor wird nicht ausgelöst, wenn ich einen Befehl und commands Array von CommandLineComponent aktualisiert. Also, Datenbindung funktioniert nicht. commands Array aktualisiert erfolgreich:

Sie um Hilfe danken.

Answer 1

Das Problem ist die Art, wie Sie die commandLineComponent Komponente referenzieren. Wenn es eine Beziehung zwischen ihnen konnte man den ViewChild Dekorateur

class CommandListComponent { 
    @ViewChild(CommandLineComponent) 
    commandLineComponent: any; 
    (...) 
} 

verwenden Wenn nicht, müssen Sie einen Shared-Service verwenden, um die commands Liste zwischen diesen beiden Komponenten zu teilen. So etwas wie das:

Sie müssen den Dienst definieren, wenn Ihre Anwendung bootstrappt und beide Komponenten es injizieren können.

class CommandListComponent { 
    constructor(private commandService:CommandService) { 
    } 
} 

checkCommand(command: string): void { 
    this.commandService.add(command); 
} 

Die CommandLineComponent Komponente wird so eines neuen Befehls benachrichtigt und die Ansicht entsprechend aktualisieren können:

class CommandLineComponent { 
    constructor(private commandService:CommandService) { 
    this.commandService.commandAdded.subscribe(command => { 
     // Update the list displayed in the component... 
    }); 
    } 
}