2016-06-09 20 views
6

Stavo cercando le alternative ng-true-value e ng-false-value in Angular 2 ma non ho ottenuto un risultato. Li hanno sostituiti con altri strumenti? Ho davvero bisogno di loro. Grazie in anticipoalternative "ng-true-value" e "ng-false-value" in Angular2

+0

Non penso che ci sia qualcosa. Hai un caso d'uso concreto? Ciò renderebbe più semplice suggerire soluzioni alternative. –

+1

quindi ho questa casella di controllo '', è ovvio che il valore 'selected' sarà o 'true' o' false' voglio che sia l'etichetta (che è dinamica ad esempio: {{xx}}) della casella di controllo .. –

+1

Capito. Immagino che ti serva un "ControlValueAccessor" personalizzato per farlo. Sono abbastanza sicuro che Angular2 non fornisce nulla attualmente pronto per l'uso. Le forme in generale hanno ancora bisogno di un po 'di lucidatura. –

risposta

0

Soluzione alternativa. Ad esempio abbiamo l''oggetto' nel modello con un 'flag' e una casella di controllo dovrebbe impostare il flag sul valore "1" e un'altra casella di controllo dovrebbe impostare il flag sul valore "2", se la casella di spunta è deselezionata il valore dovrebbe essere "0", quindi:

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">

La soluzione potrebbe essere non perfetta e in qualche modo goffo ma è qualcosa e funziona, quindi se ci sono dei miglioramenti, si prega di fare.

Quando avrò ancora un po 'di tempo cercherò di farlo in qualche sandbox se lo vorrete :).

UPDATE: Verson 2 migliore approccio e la flessibilità di file

Ts:

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 una funzione setflag prendiamo 4 parametri: oggetto, proprietà per l'oggetto, valore reale e valore falso che danno Siamo flessibili per impostare il valore che desideriamo e farlo senza mark-class. Spero che aiuti