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.
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
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:
Hier ist updateSome
:
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
Tags und Links angular typescript dynamic checkboxlist ngmodel