javascript - Fjerne valg av md-radio-button i Angular 2-app

Jeg har et sorteringsfilter satt opp på Angular-appen min, som bruker radioknapper via md-radio-group slik at brukere kan velge en foretrukket sorteringsmetode for en tabellvisning av data. Radioknappene fungerer som forventet. Jeg har imidlertid også en "Gjenopprett standarder"-knapp som jeg ønsker å bruke for å tømme alle radioknappvalg og gå tilbake til standard sortering. Så langt har jeg hatt problemer med å få radioknappene til å tømme seg.

Slik ser koden for visningen min ut:

    <filter-option name="Sort"
            placeholder="Select Sorting Option"
            [usePlaceholder]="!value"
            [visible]="sortFilters.enabled">
        <filter-label>{{value | capitalize}}</filter-label>
        <filter-menu>
            <md-radio-group class="mat-radio-label-content">
                <md-radio-button value="alphabetical" class="vert-radiobox-list" (click)="onSortClicked(value = 'alphabetical')">
                    Alphabetical
                </md-radio-button>
                <md-radio-button value="reverse alphabetical" class="vert-radiobox-list" (click)="onSortClicked(value = 'reverse alphabetical')">
                    Reverse Alphabetical
                </md-radio-button>
                <md-radio-button value="numeric ID" class="vert-radiobox-list" (click)="onSortClicked(value = 'numeric ID')">
                    Numeric ID
                </md-radio-button>
            </md-radio-group>
            <button md-button class="restore-button" (click)="clearSortingFilters()">Restore Defaults</button>
        </filter-menu>
    </filter-option>

I komponenten min har jeg dette som initialiserer filteret:

sortFilters =
{
    enabled: true,
    value: false
};

Og dette er funksjonen som er knyttet til knappen for å tømme sorteringsfiltrene:

clearSortingFilters()
{
    this.sendSort.emit(this.value = '');
}

Nå, i funksjonen ovenfor, this.sendSort.emit(this.value='') oppnår det å tømme valget som ble vist i filter-merkelappområdet. Men hvordan tømmer jeg også md-radio-group radioknappvalgene?

Svar #1

Slik bør du endre koden din for at den skal fungere:

html

<md-radio-group class="mat-radio-label-content" [(ngModel)]="selectedValue">
     <md-radio-button value="alphabetical" class="vert-radiobox-list" (click)="onSortClicked(value = 'alphabetical')">
           Alphabetical
     </md-radio-button>
     <md-radio-button value="reverse alphabetical" class="vert-radiobox-list" (click)="onSortClicked(value = 'reverse alphabetical')">
           Reverse Alphabetical
     </md-radio-button>
     <md-radio-button value="numeric ID" class="vert-radiobox-list" (click)="onSortClicked(value = 'numeric ID')">
           Numeric ID
     </md-radio-button>
</md-radio-group>    
<button md-button class="restore-button" (click)="clearSortingFilters()">Restore Defaults</button>

ts

selectedValue: string;

clearSortingFilters(){
    this.selectedValue = null; // or false or ''
  }

Arbeidende plunkr her

Svar #2

Det virker som om du vil legge til NgModel til input-verdien din. Noe som dette: [(ngModel)]="reverse alphabetical". Du vil også kanskje endre OnClick-funksjonen din for å endre verdien av "reverse alphabetical" til false.

Relaterte artikler