如何只允許在angualr的ngfor循環網格中選中一個復選框

Question

我在網格中有復選框，如下所示，但問題是，它允許每次選擇多個復選框，需要一次限制為一個。我該怎么做？

<tr *ngFor="let remote of asyncNewLinkRemoteModel | async  | paginate: { id: 'activities', itemsPerPage: 5, currentPage: p }">
                                                                    <td>                                                        
                                                                        <input type="checkbox"
                                                                        name="chkRmt"
                                                                        value="{{remote}}" (change)="setSelectedRmt(remote)"
                                                                         />
                                                                    </td>
                                                                    <td>{{remote.REGION_CODE}}</td>
                                                                    <td>{{remote.REGION_SUB_CODE}}</td>
                                                                    <td>{{remote.SITE_ID}}</td>
                                                                    <td>{{remote.MW_CATEGORY}}</td>
                                                                </tr>

Answer 1

我認為您存儲了選定的遙控器。

所以禁用其他復選框。

<input type="checkbox" name="chkRmt"
       value="{{remote}}" 
       (change)="setSelectedRmt(remote)"
       [disabled]="selectedRemote && selectedRemote != remote" />

Answer 2

我通過使用 [checked]="selectedRmt && selectedRmt == remote" 做到了

Answer 3

如果你有一個變量，例如

value:any

您可以使用通過 ngModel 和 modelChange 檢查的輸入類型

<tr*ngFor="let remote of asyncNewLinkRemoteModel | async ">
    <td>
    <input type="checkbox" [ngModel]="value==remote" 
                           (ngModelChange)="value=$event?remote :null">
    </td>
    <td>...</td>
</tr>

看到變量“value”獲取遠程的值，如果你檢查並且復選框只有當值獲取遠程的值時才為真。 如果您“取消選中”“值”變為 null