Angular 2 Template ändern Eingangswerte auf Klick

Question

Arbeiten mit einer Reihe von Säulenkomponenten mit id Eingabe in meiner Vorlage:

<div class="panel-body" *ngIf="columns"> 
    <div class="col-md-4"> 
     <column [id]=columns[current_left_column].Id></column> 
    </div> 
    <div class="col-md-4"> 
     <column [id]=columns[current_middle_column].Id></column> 
    </div> 
    <div class="col-md-4"> 
     <column [id]=columns[current_right_column].Id></column> 
    </div> 
</div> 

I Tasten haben, die die Spalten erhöhen bzw. verringern, indem die Werte von current_left_column, current_middle_column ändern, und current_right_column. Wenn ich auf diese Schaltflächen klicke, protokolliere ich die Werte der drei Spalten-IDs und sie sind repräsentativ dafür, wo sie sein sollten, aber die Vorlage wird nicht neu geladen.

Ich habe versucht, ApplicationRef.tick() zu verwenden, um Änderungserkennung auszulösen, aber die Tatsache, dass es sich nicht änderte, lässt mich denken, dass es ein verbindliches Problem ist, aber ich bin bis jetzt nicht in der Lage, etwas zu finden, das meinem Fall entspricht als 2-Wege-Bindung scheint ein traditionelleres Eingabeelement notwendig zu sein, und es ist derzeit in einer Richtung gebunden.

Answer 1

Ich schätze wirklich die Kommentare und Informationen, die mir geholfen haben, einen besseren Griff auf das zu bekommen, was ich eigentlich versuchte.

Am Ende nahm ich ein Beispiel aus einer anderen Antwort und benutze ngModel mit einer Eingabe, um die einzelnen Spalten-IDs anzuzeigen. Dann, da ich beweisen konnte, dass meine IDs wechselten, aber es wurde nicht aktualisiert, sogar mit dem Tick(), erkannte ich, dass ich auf einer Komponentenebene zu hoch arbeitete und den Wechsel von der Spaltenebene initiieren musste. Also nahm ich die ngOnInit-Methode, die die Spalten mit Daten füllt und sie in eine ngOnChanges() -Methode einfügt, löschte die OnInit() -Funktion, weil sie sich verdoppelte, und es begann sich gut zu bewegen.

Dann musste ich mit den Informationen von den Spalten beschäftigen, die oben auf der vorherigen Spalte hinzugefügt wurden, aber das war relativ gering.

ngOnChanges(){ 
    this._columnService.GetSingleColumn(this.id).subscribe(column => { this.columnData = column; }); 
    this._cardService.GetCardsByColumnId(this.id).subscribe(cards => { this._cardColumnService.LoadCards(cards); console.log(this.cards); }); 
    if (this.columnData == undefined) { 
    this.LoadDummyData(); 
    } 
} 

Answer 2

Ich denke, dass Sie den Namen des Eingangs ändern müssen. Ich habe es mehrmals gesehen, dass es mit der id Eigenschaft kollidiert, die jedes HTML-Element hat.