Bindung von ngModel an die dynamische Checkbox Liste: Angular 2 / Typescript

9

Ich bin mir nicht sicher, ob ein Modell, bei dem die Kontrollkästchen dynamisch generiert werden, gebunden und aktualisiert wird. (Dies ist ein ASP.NET Core-Projekt mit Angular 2 zunächst mit dem Yeoman-Generator erstellt) Oder ein einfaches Kontrollkästchen für diese Angelegenheit, die ich gerade herausgefunden habe.

Unten ist der abgespeckte Code, der eine Einrichtung und Timeslots hat. Jede Einrichtung kann mehrere Zeitschlitze haben. Die Checkbox-Liste für die Zeitfenster wird angezeigt. Die Anfangsdaten zeigen an, dass nur ein Zeitschlitz geprüft werden sollte. Aber wenn ich eine Einrichtung lade, werden alle Zeitschlitze überprüft. Sie sind nicht mit ngModel wie erwartet verbunden.

  1. Wie behebe ich es, damit nur die in den Einrichtungsdaten enthaltenen Zeitfenster überprüft werden und nicht alle?
  2. Wie binde ich das, was überprüft wird, an die Eigenschaft ngModel timeslotids? Muss ich eine Array-Eigenschaft für die Komponente erstellen und diese manipulieren, anstatt mich auf ngModel zu verlassen? (Ausprobiert, aber offensichtlich nicht richtig gemacht, also zurück zum Code unten)
  3. Ich habe auch ein Problem, das an eine einfache Checkbox (haselectric) gebunden ist, weil auch das nicht abhakt, wenn es sein sollte. Fehle ich einen Import, der das alles reparieren würde?

CODE ERKLÄRUNG Ich habe zwei Objekte (Einrichtung und Zeitfenster), die von einer API kommen, die ich an Schnittstellen anbinde. Ihre Eigenschaften wurden der Einfachheit halber deutlich reduziert:

%Vor%

Dies sind die JSON-Daten für Timeslots:

%Vor%

Dies sind die JSON-Daten für eine einzelne Einrichtung vor der Aktualisierung:

%Vor%

Komponente zum Bearbeiten einer Einrichtung (facility.component.html):

%Vor%

Code für die Komponente (facility.component.ts)

%Vor%

}

P.S. Der Grund, warum ich im Facility-Objekt für Timeslots über zwei Eigenschaften verfüge, liegt darin, dass eine Liste von IDs viel leichter zur Aktualisierung an die API übergeben werden kann. Anstatt vollständige Modelle zu übertragen (Zeitfenster sind größer als das, was ich hier habe und nicht benötigt, um die Datenbank zu aktualisieren). Bitte reservieren Sie Kommentare dazu, da es nichts damit zu tun hat, was getan werden muss.

Ich habe diese Frage gefunden ... aber leider hat niemand auf diesen armen Kerl geantwortet: ngmodel-Bindung mit dynamischem Array von Kontrollkästchen in angular2 Versucht dies, hat aber nicht funktioniert: Werte aus einer dynamischen Checkbox-Liste abrufen Ich versuchte auch Version der Aktualisierung einer lokalen Eigenschaft auf (Änderung) der Checkbox, aber das schien auch nicht zu funktionieren: Winkel 2: Werte mehrerer Checkboxen abrufen

    
EHeine 24.04.2017, 19:46
quelle

2 Antworten

9

Basierend auf НЛО Antwort oben war ich in der Lage, die Lösung für meine Frage herauszufinden. Vielen Dank.

%Vor%

Dann die Funktion auf der Komponente:

%Vor%     
EHeine 23.05.2017, 12:52
quelle
8

Ich habe einen Code ähnlich dem Ihren ( ngFor über alle möglichen Checkboxen, einige von ihnen sollten überprüft werden, Änderungen sollen in einer Datenstruktur gespeichert werden, die wir nicht durchlaufen), und hier ist, was ich aufziehe mit:

%Vor%

Hier ist updateSome :

%Vor%

Ich glaube auch, dass es event.target sein sollte, aber es ist event.source wegen Material. Eine Art plumpe Lösung, aber ich denke, es wird Ihnen helfen, herauszufinden, wie Sie erreichen können, was Sie wollen

    
НЛО 24.04.2017 20:09
quelle