почему радиокнопка не помечена, отмечена ли она в истинном состоянии в angular?

Question

У меня есть приложение anuglar7, в котором у меня есть выпадающий список с радио-кнопкой для каждого элемента. Но радиокнопка не проверена на успешное состояние. Вот что у меня есть в моем component.html

<ul class="status-table-ul" (click)="$event.stopPropagation()">
<li class="status-table-li" [ngClass]="[selectedIndex === i ? 'selected' : '' , filterOpt.label === 'All' ? 'all' : '']" *ngFor="let filterOpt of referralFilterOptions;let i = index" (click)="onFilterSelect(i,filterOpt.label)">
    <label class="container">{{filterOpt.label}}
        <input type="radio" [(ngModel)]="selectedFilterOption" name="radio" [value]="filterOpt.label" [checked]="i === selectedIndex">
        <span class="checkmark"></span>
    </label>
 </li>
</ul>

А в моем component.ts у меня вот так

selectedIndex : number = 0;


onFilterSelect(index : number,opt : string){
    this.selectedIndex = index;
    this.refLinkArr = opt === 'All' ? this.masterRefLinkArr : this.masterRefLinkArr.filter(item => item.link_status === opt)
    $("ul.status-table-ul").removeClass("show-menu"); 

Проблема в том, что при загрузке компонента необходимо проверить радио первого элемента , Но это не проверяется при загрузке страницы. }

Answer 1

Удалите это:

[(ngModel)]="selectedFilterOption"

При одновременном использовании [(ngModel)]="selectedFilterOption" и [checked]="i === selectedIndex" проверенное состояние зависит от [(ngModel)]

, если значение из selectedFilterOption равен 1, он проверит его, но 0 означает ложь.