2016-06-09 13 views
6

Ich suchte nach den ng-true-value und ng-false-value Alternativen in Angular 2, aber ich habe kein Ergebnis erhalten. Haben sie sie durch andere Werkzeuge ersetzt? Ich brauche sie wirklich. Vielen Dank im Voraus"ng-true-value" und "ng-false-value" Alternativen in Angular2

+0

Ich glaube nicht, dass da etwas ist. Haben Sie einen konkreten Anwendungsfall? Dies würde es einfacher machen, Workarounds vorzuschlagen. –

+1

also habe ich diese Checkbox '', es ist offensichtlich, dass der 'ausgewählte' Wert sein wird entweder 'true' oder' false' Ich möchte, dass es das Label ist (welches dynamisch ist, zB {{xx}}) der Checkbox. –

+1

Ich denke, dass Sie einen benutzerdefinierten 'ControlValueAccessor' benötigen würden, der das tut. Ich bin mir ziemlich sicher, dass Angular2 derzeit nichts bietet. Formen brauchen im Allgemeinen noch etwas Politur. –

Antwort

0

Problemumgehung. Zum Beispiel haben wir das "Objekt" im Modell mit einem "Flag" und ein Kontrollkästchen sollte das Flag auf den Wert "1" setzen und ein anderes Kontrollkästchen sollte das Flag auf den Wert "2" setzen, wenn das Kontrollkästchen deaktiviert ist „0“, so:

public setFlag(object: any, event: any): any { 
 
    if (event.target.classList.contains('some-mark-class') && (object.flag == 0 || object.flag == 1)) { 
 
    object.flag = 2; 
 
    } else if (!event.target.classList.contains('some-mark-class') && (object.flag == 0 || object.flag == 2)) { 
 
    object.flag = 1; 
 
    } else { 
 
    object.flag = 0; 
 
    } 
 
}
<input type="checkbox" name="hide-{{object.flag}}" [checked]="object.flag === 1" (change)="setFlag(object, $event)"> 
 
<input type="checkbox" name="dlte-{{object.flag}}" [checked]="object.flag === 2" (change)="setFlag(object, $event)" class="some-mark-class">

Die Lösung ist vielleicht nicht perfekt sein und irgendwie unbeholfen, aber es ist etwas, und es funktioniert, wenn Sie also einige Verbesserungen haben, bitte tun.

Wenn ich noch etwas Zeit habe, werde ich versuchen, es in einer Sandbox zu tun, wenn du willst :).

UPDATE: Verson 2 bessere Ansatz und Flexibilität

.ts-Datei:

public setFlag(obj: any, property: any, trueValue: any, falseValue: any): any { 
 
    if (obj[property] === trueValue) { 
 
    obj[property] = falseValue; 
 
    } else { 
 
    obj[property] = trueValue; 
 
    } 
 
}
<input type="checkbox" name="hide-{{object.flag}}" [checked]="object.flag === 1" (change)="setFlag(object, 'flag', 1, 0)> 
 
<input type="checkbox" name="dlte-{{object.flag}}" [checked]="object.flag === 1" (change)="setFlag(object, 'flag', 'true-value', 'false-value')>

In Abhängigkeit SetFlag nehmen wir 4 Parameter: Objekt, Eigenschaft für das Objekt, wahrer Wert und falscher Wert, die giv e us Flexibilität, um den Wert zu setzen, was wir wünschen und es ohne Markenklasse tun. Hoffe es hilft