angular - Angular - 显示单选按钮的选中值

Question

我有一个弹出窗口，其中有一个通过 *ngFor 循环填充的项目列表。一切正常。现在我想要的是，第一次显示列表时第一个项目保持选中状态。这是代码：

<div class="modal-body">
        <div class="checkBox-holder" *ngFor="let mr of myReasons; let i = index">
        <div class="radio-btn reason-options">
            <input type="radio" id="reason-{{i}}" name="radio-group" [value]="mr"
                    [checked]="selectedReason === reason-{{0}}" (click)="selectedReason = mr" [(ngModel)]="mr.value">
            <label for="reason-{{i}}">{{mr}}</label>
        </div>
        </div>
    </div>

但它不起作用，并且单选按钮显示为未选中。

标签： angular

Answer 1

尝试

在模板 html 中

<input type="radio" id="reason-{{i}}" name="radio-group" [checked]="selectedReason === mr" (click)="selectedReason = mr" [(ngModel)]="mr.value">

在 component.ts 中：

constructor (){
selectedReason = myReasons[0];
}