html - 使用 Angular 和 WebAPI 的在线考试元素

Question

我正在使用 Angular 和 WebAPI 进行在线考试元素。在父组件中，我循环父组件中的按钮等于问题的数量。通过单击每个按钮，它将发出与按钮上显示的问题编号相关的问题和选项。在子组件中，我正在显示问题。

我单击第一个问题的选项并移至第二个问题并选择第二个问题的选项。如果我回到第一个问题，所选择的就消失了!!!然而，每次我回答问题时，之前选择的选项都未选中，因为我在单选按钮中循环了选项!

父组件

<div *ngFor ="let tests of test" style="align-items: center; float: left;">

     <button class="btn btn-info" (click)="OnClick(testtype,tests.Sno,tests.Qno)">{{tests.Qno}}</button> &nbsp;

</div>

<div>
<router-outlet></router-outlet>
</div>

子组件

<div>
<label>{{test.Qno}}.{{test.Question}}</label>

<ng-container > 
    <mat-radio-group aria-labelledby="example-radio-group-label" class="example-radio-group"><br>
        <mat-radio-button class="example-radio-button" *ngFor="let option of test.Options" (click)="Onclick(test.Qno,option)" [value]="option">
            {{option}}&nbsp;&nbsp;</mat-radio-button>
            <br/>
    </mat-radio-group>
</ng-container>
</div>

Answer 1

实现此目的的一种解决方案是使用数组。数组的大小应该是所选问题的数量。

接下来，您可以存储所选的值或所选选项的索引。

要实现这一点，您必须检查所选值(答案)的变化，并且在发生变化时，该值必须更新到数组中。

<select [(ngModel)]="selectedObj" (change)="updateArray($event)">

<option *ngFor="obj of options" [ngValue]="obj">
    {{obj.name}}
</option>
</select>

如果您需要查看以前的问题选择选项，您可以从数组中选择答案。